javascript FileReader multiple ne fonctionne pas

Question

J'utilise une entrée en html pour sélectionner et télécharger l'image un par un ou plusieurs.

Je veux montrer l'aperçu avant de télécharger l'image et j'utilise js FileReader. Cela fonctionne pour une image mais ne fonctionne pas pour plusieurs images.

$('#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

Son essentiellement que i est toujours la longueur, que les événements se produisent après la boucle itérer:

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

Ainsi, vous pouvez vouloir i lier:

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