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

**cathy9999** · 04/07/2007, 09h31

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Malarkey** · 04/07/2007, 12h15

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 :

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
<!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>

**cathy9999** · 05/07/2007, 09h30

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.

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

JavaScript

Discussions similaires

Partager

Partager