Input File multiples

Version imprimable

21/02/2005, 14h09
odelayen

Input File multiples

Bonjour à tous,

Je dois créer un formulaire qui permets d'uploader plusieurs fichiers. Le problème est que je ne sais combien de fichiers va vouloir uploader l'utilisateur.

J'ai crée une page HTML avec 2 input file par défaut et un bouton qui permets d'ajouter un nouvel input file en rechargeant la page (avec javascript).

Le problème est que l'utilisateur choisit ses fichiers et lorsqu'il ajoute un nouveau champs, les valeurs sont perdues !

Comment faire pour garder les valeurs et les affecter au champs de type file ?

Merci
21/02/2005, 14h29
SpaceFrog

bascule les path de fichier dans un array global...
21/02/2005, 14h30
odelayen

Tu peux me faire un petit exemple car j'ai un peu de mal à comprendre !

Scuse chu un peu newbie en finesse HTMLesque ! :P

Ce code devrait t'aider, il permet d'ajouter autant de photos qu'on veut sans avoir à recharger la page.

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
<tr>
    <td bgcolor="#EFE8E2" id="tdnbtitre" style="border-bottom-color:#FFFFFF"><span class="gras">Nombre de photo &agrave; ajouter </span></td>
    <td id="tdnbform" style="border-bottom-color:#FFFFFF"><input name="nbphoto" type="text" id="nbphoto" size="7" maxlength="2">
      <input name="photook" type="button" id="photook" value="ok" onClick="affichform(document.getElementById('nbphoto').value)"></td>
  </tr>
  <tr id ="trphotos" style="visibility:hidden" height="0"><td id="tdphotostitre"></td><td id="tdphotosform"></td></tr>
  <script language="javascript">
	function affichform (nbphoto) {
 
		var i;
		var form;
 
		// on teste le nombre de photos qu'il faut ajouter
		if (nbphoto != "0" && nbphoto != "") {
			document.getElementById("tdphotostitre").innerHTML = "<b>Photos</b><br>Largeur max. : 400px";
			// on crée les formulaires
			form = "<INPUT TYPE=HIDDEN NAME=MAX_FILE_SIZE VALUE=100000>";
			for (i=0;i<nbphoto;i++) {
				form += "<INPUT TYPE=FILE NAME='photos"+i+"'><BR>";
			}
			document.getElementById("tdphotosform").innerHTML = form;
			document.getElementById("trphotos").style.visibility = "visible";
			document.getElementById("tdphotostitre").style.backgroundColor = "#EFE8E2";
		} else {
			document.getElementById("trphotos").style.visibility = "hidden";
			document.getElementById("tdphotostitre").innerHTML = "";
			document.getElementById("tdphotosform").innerHTML = "";
		}
	}	
	</script>

Bonjour,

si j'ai bien compris ton probleme, je pense que tu peux ruser pour eviter un rechargement de page en créant beaucoup de champs input file "statiques" que tu affiches au fur et a mesure que l'utilisateur clique sur "ajouter un fichier". Exemple de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script language="Javasript"> var nombre_champs=1; function ajouterChamp () { var obj=document.getElementById ('champ'+nombre_champs); obj.style.display=''; nombre_champs++; } </script>  <input type="file" id="champ1"> <input type="file" id="champ2" style="DISLPAY:NONE"> <input type="file" id="champ3" style="DISLPAY:NONE"> <input type="file" id="champ4" style="DISLPAY:NONE"> <input type="file" id="champ5" style="DISLPAY:NONE"> 
A toi de voir si, cette solution te convient.

21/02/2005, 14h44
odelayen

Je vous remercie tous deux !!!

C'est agréable de trouver des connaisseurs ! :D

Je n'avais pas pensé à la première solution. Je pense qu'elle s'adaptera parfaitement à mon cas. 8)

A charge de revanche (enfin si je peux sachant mes capacités)
21/02/2005, 14h46
Johnbob

Bonjour et bienvenue sur DVP :)
J'ai ajouté le tag "Résolu". Normalement c'est à l'auteur du sujet de l'ajouter. Pense-y la prochaine fois :wink: