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（）-event的调用为时过早。我该怎么办？

（浏览器是Chrome）

Answer 1

我将fr.result替换为this.result：

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

成功了

Answer 2

您正在将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])
}

Filereader.Onload触发得太早

2 个答案: