Passage de variable dans addEventListener

:salut:

Pour une fonction de drag'n'drop de fichier(s) avec affichage de la progression, j'utilise cette partie de code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

for (i=0; i<fichiers.length; i++) { var fichier = fichiers[i]; //(...)   //initialisation requete AJAX var xhr = new XMLHttpRequest();   //ecouteur requete AJAX xhr.upload.addEventListener('progress', function(event){progressUpload(event, fichier);}, false); xhr.addEventListener('load', function(event){finishUpload(event, fichier);}, false); xhr.addEventListener('error', function(event){errorUpload(event, fichier);}, false); xhr.addEventListener('abort', function(event){abortUpload(event, fichier);}, false);   //requete AJAX xhr.open('POST', parametres['urlUpload'], true); xhr.send(fichierFormData); //fichier = undefined;//pour test }

---

Or, problème, pas moyen de passer 'fichier' à l'addEventListener de l'objet xhr tout en gardant l'event du progress.
Ma fonction progressUpload ne me passe qu'uniquement le dernier fichier du groupe de fichier.
Elle me retourne un undefined si je purge la variable à la fin de ma boucle avec fichier = undefined;

Voila plusieurs... jours :cry: que je me casse les dents sur cette fonction, merci
:help:

Bonjour,

il y à plusieurs solutions mais une seule raison, lors de l'exécution de la fonction c'est la valeur, au moment de cette exécution , du fichier qui est utilisée
...des explications :fleche: http://javascript.developpez.com/faq...indowAffichage, même soucis apparemment

Code:

---

1 2 3 4 5 6

(function( fichier){ xhr.upload.addEventListener('progress', function(event){progressUpload(event, fichier);}, false); xhr.addEventListener('load', function(event){finishUpload(event, fichier);}, false); xhr.addEventListener('error', function(event){errorUpload(event, fichier);}, false); xhr.addEventListener('abort', function(event){abortUpload(event, fichier);}, false); })( fichiers[i]); //passage en paramètre

---

il y a une autre possibilité c'est que tu n'attende pas que le navigateur est lui meme chargé chaque fichier et c'est peut etre pour cela que seul le dernier fichier est pris en compte car pas écrasé par la boucle il faudrait voir plus de code utilise tu filereader ?

L'utilisation d'une boucle sur des fonctions anonymes est un problème connu. C'est le dernier item de la boucle qui sera retenu dans les events.

Il y a plusieurs solutions possibles :
- La solution proposée par la FAQ du site qui consiste à stocker la variable sur l'objet qui aura l'event listener. Je trouve ça dégueulasse et le JS permet de faire plus simple.

- La solution de passer par une fonction qui retourne une fonction :
comme l'a proposé NoSmoking, c'est la meilleure que je connaissais jusqu'à maintenant.

- Une autre solution sexy est de passer par with(){} :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

for (i=0; i<fichiers.length; i++) { with({fichier:fichiers[i]}) {   //(...)   //initialisation requete AJAX var xhr = new XMLHttpRequest();   //ecouteur requete AJAX xhr.upload.addEventListener('progress', function(event){progressUpload(event, fichier);}, false); xhr.addEventListener('load', function(event){finishUpload(event, fichier);}, false); xhr.addEventListener('error', function(event){errorUpload(event, fichier);}, false); xhr.addEventListener('abort', function(event){abortUpload(event, fichier);}, false); //(...)   }   }

---

Attention dans ce cas présent on perd le contexte du this (même problème avec la fonction anonyme.
Pour pallier à ce problème on peut utiliser une autre propriété pour le this :

Code:

---

1 2 3 4

with({fichier:fichiers[i], _this:this}) { _this.methodeDeThis(); }

---

Un autre point essentiel.
JavaScript ne définit de portée que pour une fonction, donc dans la boucle, chaque initialisation de

Code:

---

var xhr = new XMLHttpRequest();

---

écrase la précédente...

Un grand :merci: pour toutes ces réponses qui m'ont apporté la solution ! :ccool:


Je suis pas tout a fait d'accord Bovino, car sauf erreur, lors d'un glissé-déposé de 2 fichiers, les 2 requêtes xhr était bien exécuté, c'est juste l'affichage de la progression du téléchargement qui buguait !

J'ai adopté dukej ta solution car j'aime l’élégance ^^
Toutefois, la programmation objet, je l'utilise que très rarement (pas trop l'utilité hélàs), et si tu pouvais m'expliquer ce que fais le width, je t'en serai reconnaissant :)


Bref le code de la soluce pour ceux qui voudrait faire un glissé-déposé avec téléchargement et progression du téléchargement (drag'n'droap upload) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

var uploaded = new Array();// tableau des fichiers uploadé   function initDropZone(urlTraitementUploadPHP, extUploadAutorisé, uploadSuccess)//sur onload de la zone qui contient les dropZones, necessiste un id="dropBox" (zone de drop) et un id="resDropBox" (zone de resultat du drop-upload) { id2obj('dropBox').addEventListener('dragleave', function(event) { event.preventDefault();//annule l'evenement par defaut id2obj('dropBox').className = 'dropBox'; }, false); id2obj('dropBox').addEventListener('dragenter', function(event){event.preventDefault();}, false);//annule l'evenement par defaut id2obj('dropBox').addEventListener('dragover', function(event) { event.preventDefault();//annule l'evenement par defaut id2obj('dropBox').className = 'dropBox_hover'; }, false); id2obj('dropBox').addEventListener('drop', function(event) { id2obj('dropBox').className = 'dropBox'; event.preventDefault();//annule l'evenement par defaut uploadFichiers(event.dataTransfer.files, urlTraitementUploadPHP, extUploadAutorisé, uploadSuccess); }, false); }   function uploadFichiers(fichiers, urlTraitementUploadPHP, extUploadAutorisé, uploadSuccess) { groupeProgressBar = document.createElement('ul'); groupeProgressBar.className = 'groupeProgressBarJS'; id2obj('resDropBox').appendChild(groupeProgressBar); for (i=0; i<fichiers.length; i++) { with ({fichier:fichiers[i]}) { progressBar = initUpload(groupeProgressBar, fichier);//preparation de(s) progressBar   if ((extUploadAutorisé == '' || in_array('.'+fichier.name.split('.')[1], extUploadAutorisé)))//verifie l'extention du fichier { //Encodage des fichiers à uploader var fichierFormData = new FormData(); fichierFormData.append('droped', fichier);   //initialisation requete AJAX var xhr = new XMLHttpRequest();   //ecouteur requete AJAX xhr.upload.addEventListener('progress', function(event){progressUpload(event, fichier);}, false); xhr.addEventListener('load', function(event){finishUpload(event, fichier, uploadSuccess);}, false); xhr.addEventListener('error', function(){errorUpload(fichier);}, false); xhr.addEventListener('abort', function(){abortUpload(fichier);}, false);   //requete AJAX xhr.open('POST', urlTraitementUploadPHP, true); xhr.send(fichierFormData); } else { progressBar.getElementsByClassName('textProgressJS')[0].innerHTML = 'Le fichier '+fichier.name+' a été ignoré !'; } } } }   function initUpload(groupeProgressBar, fichier) { if (!id2obj(fichier.name)) { var progressBar = document.createElement('li'); progressBar.innerHTML = '<div id="'+fichier.name+'" class="progressBarJS">'+ ' <div class="pourcentageProgressJS"></div>'+ ' <div class="textProgressJS">Téléchargement de '+fichier.name+' : 0%</div>'+ '</div>'; groupeProgressBar.appendChild(progressBar); return progressBar; } }   function progressUpload(event, fichier) { if (event.lengthComputable) { id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].innerHTML = 'Téléchargement de '+fichier.name+' : '+Math.round(event.loaded * 100 / event.total)+'%'; id2obj(fichier.name).getElementsByClassName('pourcentageProgressJS')[0].style.width = Math.round(event.loaded * id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].offsetWidth / event.total)+'px'; } }   function finishUpload(event, fichier, uploadSuccess) { id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].innerHTML = event.target.responseText+' : 100%'; id2obj(fichier.name).getElementsByClassName('pourcentageProgressJS')[0].style.width = id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].offsetWidth+'px';   uploaded.push(event.target.responseText); uploadSuccess(uploaded); }   function errorUpload(i, fichier) { id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].innerHTML = 'Erreur pendant l\'envoie du fichier '+fichier.name; }   function abortUpload(i, fichier) { id2obj(fichier.name).getElementsByClassName('textProgressJS')[0].innerHTML = 'L\'envoie du fichier '+fichier.name+' a été intérompue !'; }

---

juste pour info sur la méthode avec le with https://developer.mozilla.org/en/Jav...th#Description