javascript FileReader多個不起作用

Question

我在html中使用一個輸入來選擇並逐個上傳圖像。

我想在上傳圖像之前顯示預覽，而我正在使用js FileReader。它適用於一個圖像，但不適用於多個圖像。

$('#fileToUpload').change(function(){ 
    var file = this.files; 
    filepreview(file); 
}); 



function filepreview(files) 
{ 
    var length = files.length; 

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

      var reader = new FileReader(); 
      reader.addEventListener("load",function(e){ 
       $('#pic'+i+'').attr('src' , ''+e.target.result+''); 
      }); 
      reader.readAsDataURL(file); 
    } 
} 

Answer 1

它基本上是我永遠的長度，因爲事件發生後循環迭代：

reader.addEventListener("load",function(e){//async stuff 
      $('#pic'+i+'').attr('src' , ''+e.target.result+'');//i = length 
}); 

所以，你可能要綁定我：

reader.addEventListener("load",function(i,e){//take over the bound i 
      $('#pic'+i+'').attr('src' , ''+e.target.result+''); 
}.bind(this,i));//the magic part