jQuery的功能的Onload停止循環，通過爲環X內部功能

Question

我傳遞的圖像文件從XMLHttpRequest來此功能readfiles（文件）使用數據傳遞

我想要做的是預覽圖像和圖像文件名稱，同時在reader.onload（）函數內的一行代碼中。

而且，因爲將有超過1個文件傳遞給函數，我把它們扔到一個for循環

的問題是，當我試圖通過預覽圖像readDataURL它確定，但文件名不能預覽我認爲，因爲reader.onload（）函數停止for循環通過圖像文件循環。

這裏是我的代碼

function readfiles(files) { 

    var x; 

    for(x = 0; x < files.length; x = x + 1) { 

     var reader = new FileReader(); 
     reader.readAsDataURL(files[x]); 
     reader.onload = function(e) { 
      console.log(e.target.result); 
      console.log(files[x].name); 
     } 

    } 
} 

一直在尋找解決方案現在約5小時，任何幫助！

Answer 1

ROX的答案是不正確的。在他的情況下，你會看到它會輸出4次相同的文件名。你需要的是一個閉包，它將在每次迭代時保持正確的上下文。您可以按如下所示完成此操作。檢查小提琴http://jsfiddle.net/cy03fc8x/。

function readfiles(files) { 
    for(x = 0; x < files.length; x = x + 1) { 
     var file = files[x]; 
     (function(file){ //this is a closure which we use to ensure each iteration has the right version of the variable 'file' 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 

      reader.onload = function(e) { 
       console.log(e.target.result); 
       console.log(file.name); 
      } 
     })(file);   //on each iteration, pass in the current file to the closure so that it can be used within 

    } 
} 

Answer 2

由於onload會稍後運行，此時x比您的文件數量多一個。例如，如果您有4個文件，執行onload時x將爲5。

所以參考保持到當前文件：

function readfiles(files) { 
    for (var x = 0; x < files.length; x = x + 1) { 
     // keep reference to current file on iteration 
     var file = files[x]; 

     // create closure and execute it 
     (function (file) { 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 

      reader.onload = function(e) { 
       console.log(file.name); 
      } 
     }(file)); // pass the `file` to the function 
    } 
}