帶有結果和參數的FileReader onload

Question

我無法設法在onload函數中同時獲得filereader的結果和一些參數。這是我的代碼：

控制的HTML：

<input type="file" id="files_input" multiple/> 

JavaScript函數：

function openFiles(evt){ 
    var files = evt.target.files; 
    for (var i = 0; i < files.length; i++) { 
     var file=files[i]; 
     reader = new FileReader(); 
     reader.onload = function(){ 
      var data = $.csv.toArrays(this.result,{separator:'\t'}); 
     }; 
     reader.readAsText(file); 
    } 
    } 

添加事件：

files_input.addEventListener("change", openFiles, false); 

我使用filereader.result，在onload功能。如果我爲這個函數使用參數，比如文件，我不能再訪問結果。例如，我想在onload函數中使用file.name。如何解決這個問題？

Answer 1

嘗試在另一個函數中包裝你的onload函數。這裏的封閉讓你訪問的每個文件通過變量f依次進行處理：

function openFiles(evt){ 
    var files = evt.target.files; 

    for (var i = 0, len = files.length; i < len; i++) { 
     var file = files[i]; 

     var reader = new FileReader(); 

     reader.onload = (function(f) { 
      return function(e) { 
       // Here you can use `e.target.result` or `this.result` 
       // and `f.name`. 
      }; 
     })(file); 

     reader.readAsText(file); 
    } 
} 

爲什麼這裏需要一個封閉的討論，請參閱以下相關問題：

• JavaScript closure inside loops – simple practical example
• Javascript infamous Loop issue?

Answer 2

您應該在'onload'處理程序中使用閉包。 實施例：http://jsfiddle.net/2bjt7Lon/

reader.onload = (function (file) { // here we save variable 'file' in closure 
    return function (e) { // return handler function for 'onload' event 
     var data = this.result; // do some thing with data 
    } 
})(file); 

Answer 3

作爲可變文件是的範圍內，則可以使用文件可變不經過它的功能。

function openFiles(evt){ 
 
    var files = evt.target.files; 
 
    for (var i = 0; i < files.length; i++) { 
 
      var file=files[i];  
 
      reader = new FileReader(); 
 
      reader.onload = function(){ 
 
       alert(file.name); 
 
       alert(this.result); 
 
      }; 
 
     reader.readAsText(file); 
 
    } 
 
    } 
 

 
files_input.addEventListener("change", openFiles, false);

<input type="file" id="files_input" multiple/>

Answer 4

事件處理是異步的，因此，他們拿起所有的封閉的局部變量（即封閉）的最新值。爲了特定的本地變量綁定到時，你需要按照用戶上面，或者你可以看看這個工作示例建議代碼： -

http://jsfiddle.net/sahilbatla/hjk3u2ee/

function openFiles(evt){ 
    var files = evt.target.files; 
    for (var i = 0; i < files.length; i++) { 
    var file=files[i]; 
    reader = new FileReader(); 
    reader.onload = (function(file){ 
     return function() { 
     console.log(file) 
     } 
    })(file); 
    reader.readAsText(file); 
    } 
} 

#Using jQuery document ready 
$(function() { 
    files_input.addEventListener("change", openFiles, false); 
});