Discussion :

[soohikei]

Bonjour à tous et toutes,

je suis entrain de réaliser un système d'upload d'image.

J'ai une balise select qui permet de de choisir le nombre d'image que l'on veut upload.

admettons que je veuille uploader trois images, j'ai alors trois formulaire qui s'affiche avec (pour chacun d'entre eux) :

- 1 input file
- 2 input text

et en bas de ma fenêtre j'ai un input type button qui s'affiche.

Au click du boutton j'envoie les fichiers et ce qui va avec sans soucie.

maintenant ce que je voudrais arriver a faire est d'envoyer les formulaires 1 par 1.

mais je nage totalement. J'ai essayer plusieurs façon qui ne sont a mon avis pas les bonnes

bref pourriez-vous me guider s'il vous plait ?

voila ou j'en suis :

html :

Code php :

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
<div id="img_upload">
	<div id="img_upload_head">
<?php
	require MODULE.DS."galerie".DS."traitement".DS."galerie".DS."recup.php";
?>
		<label for="nbImg">Selectionner le nombre d'image que vous voulez inserrer : </label>
		<select name="nbImg">
<?php  $nb = 10;
for ($i= 0; $i<=$nb; $i++){
?>
			<option name="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}				
?>
		</select>
	</div>
	<div id="img_upload_content">
		<div id="content_head">
			<div class="name">Selection fichier</div>
			<div class="desc">Description</div>
			<div class="price">Prix</div>
			<div class="error">status</div>
		</div>		
		<div id="content_list">
		</div>
	</div>
	<div id="img_upload_foot">
	</div>
</div>

jquery :

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
$(document).ready(function(){
	$("select[name=nbImg]").hide();
	$("select[name=gal]").change(function(){
		var galSelect = $(this).val();
		if (galSelect != "none"){
			$("select[name=nbImg]").fadeIn("fast").fadeOut("fast").fadeIn("fast");
			$("select[name=nbImg]").change(function(){
				var selfElem = $(this);
				//on recupere le nombre d'image et on l'insere dans une variable
				var nbImg = selfElem.val();
				// on vide notre contenue (permet d'avoir toujours le meme nombre pour ne pas exeder l'upload
				$("#content_list").empty();
				$("#img_upload_foot").empty();
				//on ajoute le formulaire suivant le nbImg que l'on veut Up unun form par image 
				for (var i = 1; i <= nbImg ; i++){
					$("#content_list").append("<form action=\"#\" id=\"form"+i+"\" method=\"POST\" enctype=\"multipart/form-data\"><span class=\"name\"><input type=\"file\" name=\"img[]\"id=\"img\" /></span><span class=\"desc\"><input type=\"text\" id=\"desc\" name=\"desc\" /><input type=\"hidden\" id=\"gal\" name=\"gal\" value=\""+galSelect+"\"/></span><span class=\"price\"><input type=\"text\" id=\"price\" name=\"price\" /></span><span class=\"error\"></span></form>");
				}
				$("#img_upload_foot").append("<input type=\"button\" name=\"envoyer\" value=\"Envoyer\" id=\"send\" />");
				$("#send").click(function(){
					var form = $("#img_upload").find("form");
					var nbForm = $("#img_upload").find("form").length;
					var action = "/module/galerie/traitement/traitimg.php";
					var desc = form.find("input[name=desc]").val();
					var gal = $("select[name=gal]").val();
					var price = form.find("input[name=price]").val();
					for (var i = 1; i <= nbForm; i++){
						var formData = new FormData();
						jQuery.each($("#form"+i).find('input[name^="img"]')[0].files, function(i, file) {
						formData.append('img-'+i, file);
						formData.append('desc', desc);
						formData.append('price', price);
						formData.append('gal', gal);
						jQuery.ajax({
							url :action,
							type : "POST",
							processData: false,
							contentType: false,
							data: formData,
							success: function(formData){
								// alert(formData);
							}
						});
					});
				}
			});
		});
	}else{$("select[name=nbImg]").hide();$("#img_upload_foot").empty();}
	});
});

Merci d'avance

[soohikei]

bon j'ai essayer en mettant un seul formulaire et en imbriquant les input dedans dans une balise p pour les separer :

Code html :

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
<div id="img_upload">
	<form action="monaction.php" id="form" method="POST" enctype="multipart/form-data">
		<div id="img_upload_head">
<?php
require MODULE.DS."galerie".DS."traitement".DS."galerie".DS."recup.php";
?>
			<label for="nbImg">Selectionner le nombre de champ que vous voulez inserrer : </label>
			<select name="nbImg">
<?php  $nb = 10;
for ($i= 0; $i<=$nb; $i++){
?>
				<option name="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}                               
?>
			</select>
		</div>
		<div id="img_upload_content">
			<div id="content_head">
				<div class="name">Selection fichier</div>
				<div class="desc">Description</div>
				<div class="price">Prix</div>
				<div class="error">status</div>
			</div>		
			<div id="content_list">
				/*ici je rajoute mes inputs*/
                             <p>
	                        <span class="name">
	                        	<input name="img[]" id="img" type="file">
	                        </span>
	                        <span class="desc">
		                        <input id="desc" name="desc" type="text">
		                        <input id="gal" name="gal" value="Acrylique" type="hidden">
	                         </span>
	                         <span class="price">
		                        <input id="price" name="price" type="text">
	                         </span>
	                         <span class="error"></span>
                              </p>
			</div>
		</div>
		<div id="img_upload_foot">
		</div>
	</form>
</div>

mais quand je lance ma requête il me fait encore tous les traitrements en même temp ...