Discussion :

[epeedelorage]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 que je me casse les dents sur cette fonction, merci

[NoSmoking]

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 http://javascript.developpez.com/faq...indowAffichage, même soucis apparemment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

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 ?

[dukej]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var xhr = new XMLHttpRequest();

écrase la précédente...

[epeedelorage]

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


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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !';
}

[NoSmoking]

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