Question

该函数成功创建了new-avatar-picture类的N个图像元素，但是，它仅向第一张图像添加了SRC属性。我在控制台中也没有收到任何错误。

function displayInputImage(input) {

    var files = input.files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();
        var x = document.createElement("img");

        reader.onload = function(e) {
            x.setAttribute("src", e.target.result);
        }

        reader.readAsDataURL(file);

        x.className = "new-avatar-picture";
        $('.upload-btn-wrapper').append(x);
    }

}

Answer 1

您的逻辑问题是由于以下事实：循环完成后会触发onload()读者，因此x将引用集合中的最后一个元素。因此，该单个元素获得了src组N次。

要解决此问题，您可以使用闭包：

function displayInputImage(input) {
  for (var i = 0; i < input.files.length; i++) {
    var $img = $("<img />");
    (function($imgElement) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $imgElement.prop("src", e.target.result);
      }
      reader.readAsDataURL(input.files[i]);

      $imgElement.addClass("new-avatar-picture");
      $('.upload-btn-wrapper').append($imgElement);
    }($img));
  }
}

或者，只有在读取文件内容之后，才能创建新的img元素：

function displayInputImage(input) {
  for (var i = 0; i < input.files.length; i++) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('<img />').addClass('new-avatar-picture').prop('src', e.target.result).appendTo('.upload-btn-wrapper');
    }
    reader.readAsDataURL(input.files[i]);
  }
}

Answer 2

一种实现方法是为每个图像赋予新属性，我将其称为string(12) ""，以使浏览器不会立即尝试加载图像。

然后在temp_src事件中，循环遍历您创建的所有图像，并通过从其.onload属性中复制图像来为其赋予适当的src值。

类似的东西：

temp_src

为什么我的函数仅将SRC属性仅应用于第一个上载的图像？

2 个答案: