[DOM] Contenu des "input file" qui s'effacent

Version imprimable

Bonjour,

Souhaitant réaliser un formulaire, j'ai mis en place plusieurs champs "input file" qui permettrait de charger à l'utilisateur plusieurs images, et la possibilité d'insérer le nom de l'image dans la textarea avant d'être uploader.

J'ai donc utilisé deux fonctions javascript, le souci c'est que à chaque fois que je clique sur "ajouter un champ", cela m'efface le contenu des input file, comment faire pour le garder ??
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var i=0; function create_champ() { i++; document.getElementById('leschamps').innerHTML += '<input type="file" id="fichier_'+i+'" name="fichier_'+i+'">'+ '<input type="button" value="Inserer nom image" style="width:120px" onClick="inserer_nom('+i+')" /><br /> '; } function inserer_nom(num) { var text = document.getElementById('fichier_'+num).value; var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier "\" document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n'; }
Code:

1 2 3 <input type="file" name="fichier_1" id="fichier_1" /> <input name="button" type="button" onClick="inserer_nom('1')" value="Inserer nom image"/> <span class="Style9" id="leschamps"></span><a href="javascript:void(create_champ());" class="titreRubrique">Ajouter un champ</a></p>
Représentation :
Quand je clique sur upload, cela vient mécrire C:\Documents\image1.jpg, quand je clique sur inserer nom (le bouton a coté),cela m'inserer image1.jpg ds textarea! mais quand je clique sur "ajouter un champ", cela m'efface le précédent et donc qunad je vais cliquer sur "submit" cela ne me chargera aucune image.

Merci

Si j'étais toi, je me serais orienter vers l'utilisation du DOM. Voilà ce que j'ai pu te réaliser en 5 minutes :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajout de input file en DOM</title>
<script>
var _indice=0;
function addInputFile(id) {
	var dest=document.getElementById(id);
	var div=document.createElement("div");
	var input=document.createElement("input");
	input.type="file";
	input.id="f"+_indice;
	div.appendChild(input);
        div.appendChild(createBoxDel(div));
	dest.appendChild(div);
        _indice++;
}
function createBoxDel() {
	var input=document.createElement("input");
	input.type="checkbox";
	input.onclick=function() {
		var p=this.parentNode;
		div=p.parentNode;
		div.removeChild(p);
	}
	return input;
}
</script>
</head>
 
<body>
<div id="divInputFile">
</div>
<div><input type="button" value="Ajouter champ " onclick="addInputFile('divInputFile')" /></div>
</body>
</html>

05/07/2007, 09h30
cathy9999

Cette fonction ok me permet de rajouter un champ mais je l'ai déja faite, et cela me vide encore les champs ! de plus, elle ne s'adapte vraiment plus à ma fonction pour inserer le nom de l'image.