循环通过 FileReader onload Jquery

Question

我需要遍历所有类型文件的输入，并将其加载为预览。到目前为止我的代码：

var _i = 0;
function setImagesToPreview(){
  $("form#form-generate-mail input[type=file]").each(function(i){
    var input = $(this);
    _i = i;

    if (input.context['files'] && input.context['files'][0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $(document).find("div.modal-preview-mail img.image_placeholder:nth-child("+_i+")").attr('src', e.target.result);
      }

      reader.readAsDataURL(input.context['files'][0]);
    }
  });
}

以下代码有效，但仅适用于 1 个输入。这样做的原因是，作为计数器的变量 'i'，当它到达 reader.onload 时，变量被设置为最终值。

ex: 5个输入，计数器'i'每次加1，从0到4，但是一旦到达reader.onload，它总是显示4，从不递增。

任何帮助都会有用，在此先感谢。

Answer 1

只需将内部代码用IIFE包裹起来。因此，您正在创建一个新的执行上下文，并且 i 的当前状态保存在其中。

简要示例：

for (var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() { console.log(i); }, 50 * i);
    })(i);
}

Answer 2

我认为你需要像这样创建一个上下文....

  reader.onload = (function(index){
        return function (e) {
             $(document).find("div.modal-preview-mailimg.image_placeholder:nth-child("+index+")").attr('src', e.target.result);
      };
})(_i);

循环通过 FileReader onload Jquery

Looping Through FileReader onload Jquery

javascript

jquery

filereader