Question

我对以下内容有疑问。我有一个包含一个按钮的表格，允许选择am图像。选择图像后，脚本会显示图像的尺寸以及指甲。问题是，如果用户选择其他图像，则尺寸将显示两次。目前，尺寸已重复。我该如何预防。

在我的代码中看到下面标记为“下面的线”的行

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("browse2"),
  elPreview = document.getElementById("preview6"),
  elPreviewtext = document.getElementById("previewtext6"),
  useBlob = false && window.URL;

function readImage(file) {
  console.log("elPreviewtext", elPreviewtext);
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    var image = new Image();
    image.addEventListener("load", function() {
      var imageInfo = file.name;
      var filetype = imageInfo;
      var ext = filetype.split('.').pop();
      if (image.width != editw && image.height != edith) {
        $.alert({
          title: 'Image select error!',
          content: 'The image you have seleted is incorrect, ' + image.width + ' by ' + image.height + ' portrate.<br/><br/> "Please resize your image to the correct size in landscape.<br/><br/>Resizing upwards reduces the quality of the image. Start with a large image and resize downwards.',
          animation: 'zoom',
          boxWidth: '50%',
          closeAnimation: 'zoom',
          buttons: {
            okay: {
              text: 'Try again',
              btnClass: 'btn-blue'
            }
          }
        });
      } else {
        var imageInfotext = '';
        var imageInfotext = 'Display width: ' + image.width + ',<br/>Display height: ' + image.height;
elPreviewtext.innerHtml = "";        
elPreview.appendChild(this);
        // THE LINE BELOW DISPLAYS THE IMAGE DIMENTION IN A DIV ON THE FORM "<div class="bodytext" id="previewtext6"></div>"
        elPreviewtext.insertAdjacentHTML("beforeend", imageInfotext + '<br>');
        if (useBlob) {
          window.URL.revokeObjectURL(image.src);
        }
      }
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
  });
  reader.readAsDataURL(file);
}

在此先感谢您的帮助和时间。

Answer 1

只需在添加信息之前清除元素（只需添加一些代码行）即可：

var imageInfotext = '';
var imageInfotext = 'Display width: ' + image.width + ',<br/>Display height: ' + image.height;
elPreview.appendChild(this);
// HERE CLEAR THE CONTENT
elPreviewtext.innerHtml = "";
// THE LINE BELOW DISPLAYS THE IMAGE DIMENTION IN A DIV ON THE FORM "<div class="bodytext" id="previewtext6"></div>"
elPreviewtext.insertAdjacentHTML("beforeend", imageInfotext + '<br>');

清除具有动态创建的内容的Div的问题

1 个答案: