jQuery each stop et restart en incrémentant

Version imprimable

Bonjour,

Je suis en train de travailler sur un exercice d'upload de fichier vous trouverez le code et son fonctionnement ici.

Mon problème actuel est que j'ai une liste de fichier que je veux uploader avec formData et xhr ceux qui fonctionne bien quand j'envoie tous les fichiers en même temps.
Mon problème vient du faite que dans ma boucle each j'envoie le premier fichier sans aucun problème mais je ne trouve pas le moyen de lancer le second a la fin du première envoie.

Je vous met le js ici en plus :

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
$(function(){
 
	var list     = [];
	var fileList;
	$("#img").change(function(e){
 
		var file  = e.target.files;
 
		if (list.length === 0){
 
			for (var i = 0, f; f = file[i]; i++){
				list.push(f.name);
				fileList = e.target.files;
				$("#content_list").append("<div class=\"content_head_title title_name\">"+f.name+"</div><div class=\"content_head_title title_desc\"><input type=\"text\" id=\"desc\" name=\"desc\" /></div><div class=\"content_head_title title_price\"><input type=\"text\" id=\"price\" name=\"price\" /></div><div class=\"content_head_title title_status\" id=\"status"+i+"\"></div>");
 
			}
 
		}else{
			for (var i = 0, f; f = file[i]; i++){
				if (jQuery.inArray(f.name, list) == -1){
					list.push(f.name);
					fileList = e.target.files;
					$("#content_list").append("<div class=\"content_head_title title_name\">"+f.name+"</div><div class=\"content_head_title title_desc\"><input type=\"text\" id=\"desc\" name=\"desc\" /></div><div class=\"content_head_title title_price\"><input type=\"text\" id=\"price\" name=\"price\" /></div><div class=\"content_head_title title_status\" id=\"status"+i+"\"></div>");		
				}
			}
		}
	});
 
	$("#send").on("click", function(e){
		e.preventDefault();
		var elem;
		var loadStop = false;
		var data = new FormData();
		var xhr = new XMLHttpRequest();
 
		$.each(fileList, function(i, v) {
			elem = $(this);
			$("#status"+i).append("<img class=\"loader\" src=\"modules/image/media/icons/loader.png\"/>");
			data.append("file"+[i],fileList[i]);
			xhr.onreadystatechange = function() {
 				if (xhr.readyState == 4) {
        			if (xhr.responseText == "0"){
        				$("#status"+i).empty().append("<img class=\"loader\" src=\"modules/image/media/icons/valid.png\"/>");
        				i++;
        				loadStop = true;
        			}else loadStop = false;
    			}
			}
			xhr.open('POST', "modules/image/coreAdmin/traitimg.php", true);
			xhr.send(data);
			return loadStop;
		});
	});
 
 
});

Je sais que "return false" m'arrete la boucle ... et "true" la continue; et c'est la ou je bloque pourriez vous me guidez vers la bonne direction ?
merci d'avance

*********EDIT*********

Bon j'ai regarder du coter de setTimeout mais je ne vois pas comment m'en servir dans ce cas :/

bon du coup j'essaie de passer par ajax :

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
$("#send").on("click", function(e){
		e.preventDefault();
		var elem;
		var loadStop = false;
 
		$.each(fileList, function(i, v) {
			var data = new FormData();
 
			$("#status"+i).append("<img class=\"loader\" src=\"modules/image/media/icons/loader.png\"/>");
 
			data.append("file"+[i],fileList[i]);
			jQuery.ajax({
                url :"modules/image/coreAdmin/traitimg.php",
                type : "POST",
                processData: false,
                contentType: false,
                data: data,
                success: function(data){
                	console.log(data);
                },
                complete: function(){
                		$("#status"+i).empty().append("<img class=\"loader\" src=\"modules/image/media/icons/valid.png\"/>");
                }
            }); 
		});
	});

Ça fonctionne bien mais il m'envoie tous les fichiers en même temps alors que je voudrais les traiter un par un.

ce que je veux dire c'est :

J'ai une liste de fichier je veux uploader le premier fichier, a la fin de l'upload de celui-ci(qu'il y est une erreur ou non) je veux envoyer le deuxième et ainsi de suite.

et c'est la ou ça coince.

Pourriez-vous m'aider. est ce qu'il possible de le faire ? est ce nécessaire de le faire ?

Merci d'avance

24/09/2014, 23h00
Watilin

Bonsoir,

eh oui tes requêtes partent toutes en même temps, c'est normal avec Ajax. Quand une requête est lancée, le script continue sans attendre la réponse. Ton .each() fait ça : il lance les requêtes toutes en même temps.

Efface ce .each(). Tu dois ajouter du code dans la fonction complete de tes requêtes pour lancer la requête suivante une fois la réponse reçue. Tu pars de fileList[0] (en vérifiant que le tableau n'est pas vide), tu te gardes une variable i sous la main et tu fais i++ quand une réponse arrive. Ce i te permet de savoir quelle est la prochaine requête à lancer.
25/09/2014, 11h34
devyan

Bonjour,

Tu peux aussi utiliser la méthode pop() du tableau pour éviter la variable i.