[DOM] Effacer champ input file

Version imprimable

Bonjour,

J'aimerais savoir si cela est possible d'effacer le champ input de type file. J'explique :

J'ai un champ : <input type="file"> qui me permet de parcourir mes fichiers.
Une fois un fichier selectionné, je clique sur un bouton ajouter qui me l'ajoute à une liste mais je voudrais aussi effacer le contenu du champ file.

Avec value=""; ca marche pas
J'ai vu qu'il existait un moyen aussi grace :
Code:

1 2 3 4 5 6 7 var f=document.getElementById('test'); var p=f.parentNode; p.removeChild(f); var i=document.createElement('input'); i.setAttribute('id','test'); i.setAttribute('type','file'); p.appendChild(i);
Mais la non plus ca veut pas
Donc voila ....

03/07/2006, 17h27
Kerod

Essayes avec ceci :

Code:

document.getElementById('idinput').reset();
03/07/2006, 17h37
vince_grenoblois

Citation:

Envoyé par Kerod

Essayes avec ceci :

Code:

document.getElementById('idinput').reset();

Finalement j'ai reussi à faire fonctionner avec la 2eme metode que j'avais donné.
C'est a dire tuer le input puis le recréer. C'est pas top mais ca marche.

Sinon j'ai bien essayé ta methode. Ca aurait ete sympa car c'etait plutot court mais malheureusement sans resultat.

merci quand meme.

Autant pour moi j'ai omis un détail, voici ce qui fonctionne :
Code:

1 2 3 4 5 6 7 8 <html> <body> <form id='t'> <input type="file"/><input type="button" onclick="document.getElementById('t').reset()"/> </form> </body> </html>

03/07/2006, 18h03
vince_grenoblois

Ok c'est pas faux que ca marche comme ca. Mais ca risque de me donner un formulaire imbriqué dans un autre formulaire. Bref, plus court mais tout aussi efficace !
03/07/2006, 18h27
Kerod

Tiens j'ai testé et ca fonctionne :

Code:

<input type="file" id='t'><input type="button" onclick="document.getElementById('t').value=''"/>
04/07/2006, 16h37
Luffy Duck

salut =)

j'ai le même souci, et le

Code:

document.getElementById("pj").value = '';

ne fonctionne pas.
T'imagines, cela voudrait dire que tu pourrais uploader le fichier que tu veux du poste client, genre un fichier de config, ou autre... ça fait un peu désordre quand même...

Enfin bref, j'ai toujours pas la solution et ça m'embête un peu de devoir le supprimer et le recréer. Je trouve ça pas très propre...
04/07/2006, 17h27
Kerod

Je comprends pas pourquoi ca fonctionne pas surtout que j'ai testé...C'est qu'il y a un autre problème quelque part :roll:
05/07/2006, 12h33
Luffy Duck

je ne sais pas, mais je viens de retester et ça ne fonctionne toujours pas. Dans un sens c'est presque normal, car comme je le disais avant cela poserait de gros problèmes de sécurité car on pourrait faire uploader le fichier que l'on souhaite... J'ai finalement pris la technique de vince_grenoblois, c'est-à-dire supprimer et recréer l'input avec le DOM.

J'ai eu la même envie de pouvoir faire un reset sur un input file. Le code fonctionne très bien en apparence :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script>  </script>
Comme j'avais indexé le nom du champ avec php, je reprend directement l'ancien nom du champ, pour être sûr que ça ne change rien.

Ma balise input avant le déclenchement de la fonction :

Code:

<input name="photo_5" id="photo" size="37" type="file">

Et la même après remplacement :

Code:

<input name="photo_5" id="photo" size="37" type="file">

Et pourtant, sous FF ou Safari, le script php de traitement du fichier ne reçoit aucun fichier quand le formulaire est envoyé. Tout ça fonctionne sous IE.

D'où cela peut-il venir?

Voici la réponse après quelques recherches :

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
 
<script>
<!--
function reset_photo(){
	if(navigator.appName=="Microsoft Internet Explorer"){
		var f=document.getElementById('photo');
		var ancien_nom=f.attributes['name'].nodeValue;
		var p=f.parentNode;
		p.removeChild(f);
		var i=document.createElement('input');
		i.setAttribute('size','37');
		i.setAttribute('id','photo');
		i.setAttribute('name',ancien_nom);
		i.setAttribute('type','file');
		p.appendChild(i);
	}else{
		document.getElementById("photo").value = ""; 
		var input = document.getElementById("photo").cloneNode(true);
		input.setAttribute("value", "");
		document.getElementById("container").innerHTML = "";
		document.getElementById("container").appendChild(input);
		}
}
-->
</script>

A condition de mettre l'input entre balises

Code:

<div id="input"><input name="photo_<?php echo $i;?>" id="photo" size="37" type="file"/></div>

Comme ça, tout le monde est content (IE, FF et Safari):lol: