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（）-event的調用為時過早。 我該怎么辦？

（瀏覽器是Chrome）

Answer 1

我用this.result替換了fr.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])
}