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