Filereader.Onload 开火太早

Question

我尝试读取由输入类型文件（多个）上传的文件。代码如下：

$(document).ready(function() {
  $('#convert').on('click', function() {
     var files=$('#files')[0].files;
     if (!files) return;
     for (var i=0; i<files.length; i++) {
       var file=files[i];
       fr = new FileReader();
       fr.onload = (function(received) {      
         var note=$(fr.result);
       });
       fr.readAsText(file);
     }
  });
});

现在我的问题是： "onload" - 函数甚至在文件加载之前就被调用了。 note从来没有任何内容。但是当我在 note - 行之前放置一个断点并等待一段时间时，note 获取内容。

看来，onload() 事件调用得太早了。我该怎么办？

（浏览器是 Chrome）

Answer 1

您正在使 fr 成为一个全局变量，并且在 onload 触发时，由于循环

，它将成为与您预期不同的对象

尝试将其包装在 IIFE 中以创建闭包并使 fr 成为局部变量

for (var i = 0; i < files.length; i++) {  
  (function(file) {
    var fr = new FileReader();
    fr.onload = function(received) {
      var note = $(fr.result);// not sure what intent is here
    };
    fr.readAsText(file);
  })(files[i])
}

Answer 2

我用 this.result 替换了 fr.result:

fr.onload = (function() {      
  var note=$(this.result);
});

成功了

Filereader.Onload 开火太早

Filereader.Onload fired too early

javascript

filereader