[DOM] Effacer champ input file

**vince_grenoblois** · 03/07/2006, 17h20

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 :

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

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

**Kerod** · 03/07/2006, 17h27

Essayes avec ceci :

Code :

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

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

**vince_grenoblois** · 03/07/2006, 17h37

Envoyé par Kerod

Essayes avec ceci :

Code :

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

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.

**Kerod** · 03/07/2006, 17h50

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

Code :

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

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>

**vince_grenoblois** · 03/07/2006, 18h03

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 !

**Kerod** · 03/07/2006, 18h27

Tiens j'ai testé et ca fonctionne :

Code :

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

<input type="file" id='t'><input type="button" onclick="document.getElementById('t').value=''"/>

**Luffy Duck** · 04/07/2006, 16h37

salut =)

j'ai le même souci, et le

Code :

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

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

**Kerod** · 04/07/2006, 17h27

Je comprends pas pourquoi ca fonctionne pas surtout que j'ai testé...C'est qu'il y a un autre problème quelque part

**Luffy Duck** · 05/07/2006, 12h33

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.

**briegel** · 14/02/2009, 15h40

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 :

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
<script>
	<!--
	function reset_photo(){
		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);
	}
	-->
	</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 :

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

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

Et la même après remplacement :

Code :

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

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

**briegel** · 14/02/2009, 15h54

Voici la réponse après quelques recherches :

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

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

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

[DOM] Effacer champ input file

JavaScript

Discussions similaires

Partager

Partager