javascript - 为什么我的函数只将 SRC 属性应用于第一个上传的图像？

Question

该函数成功创建了 N 个图像元素，类为 new-avatar-picture，但是，它只为第一张图像添加了 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]);
  }
}