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个输入。这样做的原因是变量＆＃39; i＆＃39;作为计数器，当它到达reader.onload时，变量被设置为最终值。

ex：5个输入，计数器＆＃39; i＆＃39;每次递增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循环

2 个答案: