Discussion :

[FunK92]

Bonjours à tous,

J'utilise Jquery & Jquery UI, Je souhaite faire une progressbar qui indiquer la progression d'upload de fichier.

voici mon bout 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
20
21
for (i = 0 ; i < uploadQueue.length ; i++)
	{	
		uploadQueue[i] = uploadQueue[i].replace(/::/, "."); 
		uploadQueue[i] = uploadQueue[i].replace(/:/, "/"); 
 
 
		$.ajax({
			async:false,
			type: "POST",
			url: domain+"/actions/elements/arborescence/action/upload.php",
			data: "Queue="+uploadQueue[i],
			success: function(msg)
			{	
 
 
 
 
			}	
		});
 
	}

En clair, je fait un boucle sur la queue de fichier à uploader puis pour chaque fichier j'effectue une requete vers le fichier php qui va uploader le fichier.

Le probleme ce situe au niveau de la progression de la progressbar. En effet on voit clairement defiler la barre sous FF, mais sous IE CHROME et SAFARI, j'ai l'impression qu'il envoie toutes les requetes puis affiche directement la bar a 100%. En gros sa bloque le navigateur pendant un certain temps et affiche a la fin 100%, ce qui n'est pas l'effet voulu.

Merci de votre aide, cordialement Funk.

PS : le async:false est vonlontaire car j'ai pas envie de lancer 100 fichier en upload casi en meme temps.

[Mohicane]

Je ne vois aucun code à propos de la progress bar, tu peux nous le montrer ou tout du moins nous expliquer ton algorithme?

[FunK92]

Oui désolé j'avais pas mit le code complet, le voici :

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
 
for (i = 0 ; i < uploadQueue.length ; i++)
	{	
		uploadQueue[i] = uploadQueue[i].replace(/::/, "."); 
		uploadQueue[i] = uploadQueue[i].replace(/:/, "/"); 
 
		$.ajax({
			async:false,
			type: "POST",
			url: domain+"/actions/elements/arborescence/action/upload.php",
			data: "Queue="+uploadQueue[i],
			success: function(msg)
			{	
				totalRestant += uploadSize[i];
				percent = ((totalRestant*100)/totalSize);
 
				$("#progressbar").progressbar({ value: percent });
				$("#pourcentage").html(percent+"%");				
			}	
		});
 
	}

[sayari.dev]

Bonjour,

Il faut enlever l'option async ou la mettre à true

Plus d'infos sur la fonction ajax de jQuery : http://api.jquery.com/jQuery.ajax/

[Mohicane]

Il faut savoir que sous IE, les requêtes Ajax synchrones font "frizzer" le navigateur.

Je te conseille:
- soit de mettre un délaie entre chaque requête Ajax (au cas où IE n'ait pas eu le temps tout simplement de rafraichir ta barre de progression),
- soit de séquentialiser tes appels Ajax (ie. de faire des requêtes Ajax asynchrone et d'appeler le prochaine upload dans le onsuccess)

[FunK92]

Le soucis c'est que je souhaite justement que mes requête soit synchrone pour ne pas lancer 100 upload de fichier en meme temps.

Je n'arrive pas a trouver la raison pour laquelle cela fonctionnement parfaitement sous FF et pas sur safari/ie/chrome.

Il faut savoir que sous IE, les requêtes Ajax synchrones font "frizzer" le navigateur.

Je te conseille:
- soit de mettre un délaie entre chaque requête Ajax (au cas où IE n'ait pas eu le temps tout simplement de rafraichir ta barre de progression),
- soit de séquentialiser tes appels Ajax (ie. de faire des requêtes Ajax asynchrone et d'appeler le prochaine upload dans le onsuccess)

Merci te ta réponse, je me doutais bien que le navigateur y était pour quelque chose. Je vais donc revoir la conception.