Comment montrer la valeur de 'i' (pour la boucle) dans FileReader.onload

Question

J'essaye de montrer l'aperçu de plusieurs dossiers d'image par input file et assigner chacun d'entre eux un id spécifique (j'ai généré de la boucle for). Tout fonctionne correctement, mais il est difficile de leur attribuer l'identifiant.

Mon code est

function fileSelected() { 
var files = event.target.files; 
    for(var i=0; i<files.length; i++) { 


    var reader = new FileReader(); 
reader.onload = function(event) { 
    var picWrap = '<img id="'+i+'" src="'+event.target.result'" />'; 
} 
reader.readAsDataURL(files[i]); 
} } 

J'utilise onclick pour utiliser cette fonction

maintenant selon le code ci-dessus, je reçois l'aperçu de tous les fichiers, mais il y a un problème avec leur ID.

Comme si je sélectionne 2 fichiers puis le résultat est

(filePreview) Id = 2 
(filePreview2) Id = 2 

et si je sélectionne 3 fichiers puis-je obtenir l'aperçu de tous les 3 fichiers mais leur ID devient 3 pour chaque image, et si je sélectionne seul fichier alors la valeur I devient 1 et non 0.

Answer 1

Le problème est que lorsque l'événement onload se produit, la boucle est déjà terminée, l'indice de boucle étant la dernière valeur. Une option serait de faire ce qui suit, que je fixe dans le rappel à la valeur fournie lors de l'appel bind:

reader.onload = (function(i, event) { 
    var picWrap = '<img id="'+i+'" src="'+event.target.result'" />'; 
}).bind(reader, i);