Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Effacer un champs de type "file" en JS > Lecture du sujet

Effacer un champs de type "file" en JS

Vous devez être inscrit pour pouvoir poster des messages

RésoluLe problème de ce sujet a été résolu

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne jeff52 # Posté le 25/07/2008 à 01:08:47
PHPadawan
Avatar
Groupe : Membres
Bonsoir, j'ai un problème tout simple :

J'ai un <input type="file" id="fichier" ... /> et un <input type="button" value="Effacer" onclick="erase('fichier');" />

Lorsqu'on clique sur le bouton, la valeur du champs 'fichier' est effacée.
Sous firefox, no problem. Mais IE ne fait rien lorsque je le clique.
Le champs n'est pas effacé, et aucune erreur signalée.

Ma fonction JS erase()

Code : JavaScript
1
2
3
4
5
function erase(target_id)
{
	target = document.getElementById(target_id);
	target.value = '';
}


J'en conclu que IE ne gère pas le .value = ''; pour les input de type "file" (car avec type="text" ça marche très bien!)

Une idée pour effacer la valeur d'un input type="file" sous tous les navigateurs ?
:euh:
 
Hors ligne BuRner # Posté le 25/07/2008 à 09:25:48
Avatar
Groupe : Membres
Ouep idem sous Opera il mes semble; j'ai déjà cherché mais rien trouvé...

Contact : #php-fr @ chat.freenode.net (IRC)
PHP : include('BuRner.php');
C/C++ : #include <BuRner.h>
JAVA : import java.BuRner.*;
Pascal : uses BuRner;
 
Hors ligne jeff52 # Posté le 25/07/2008 à 14:04:52
PHPadawan
Avatar
Groupe : Membres
Ben ça m'aide pas ...

Au lieu de mettre target.value = ''; n'y aurait-il pas une méthode JS du genre target.reset(); ou quelque chose comme ça ?
(J'ai essayé le reset() à tout hasard, mais cela ne semble pas être une méthode valide)
Édité le 25/07/2008 à 14:16:56 par jeff52
 
Hors ligne Darkodam # Posté le 25/07/2008 à 16:01:24
il est à peu près deezer
Avatar
Groupe : Membres
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Salut,

Pour ton problème, je te propose deux solutions. La première, la plus simple est d'utiliser un input de type reset :
Code : HTML
1
2
3
4
5
<form method="post" action="">
       <input type="text" value="default" id="texte" /><br /> <!-- met en valeur l'action du bouton reset sur les autres champs -->
       <input type="file" /><br />
       <input type="reset" value="Effacer" />
</form>

L'inconvénient de cette méthode est que tous les champs du formulaire seront remis à 0.

La deuxième méthode utilise la fonction javascript replaceChild :
Code : HTML
1
2
3
4
<form id="myform" action="" method="post">
	<input type="text" value="default" id="texte" /><br /> <!-- met en valeur l'inaction du bouton "Effacer" sur les autres champs -->
	<input type="file" id="file" /><br />
</form>

Code : JavaScript
 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
	Quelques variables utiles :
		\o d:		Raccourcis vers document
		\b IE:	Variable détectant IE (v6 min.)
**/

var d = document;
var IE = !!(window.attachEvent && !window.opera);

/**
	Quelues fonctions utiles :
		bind(elem, event, fct):
			Attache une fonction \f fct à l'élément \o elem lorsque l'évènement \s event est détécté.

		$(elem):
			Retourne l'élément de la page d'id ( \s ou \o) elem

		ac(e1, e2):
			Ajoute en tant que noeud enfant à \o e1 le noeud \o e2 

		ce(p):
			Crée un nouvel élément \s p
**/

function bind(elem, event, fct) {
	var c = false;
	if(arguments[3] !== undefined)
		c = arguments[3];
	if(d.attachEvent) {
		elem.attachEvent("on"+event, fct);
	}
	else
	{
		elem.addEventListener(event, fct, c);
	}
}

function $(elem) {
	if(typeof elem !== "string")
		return elem;
	else if(d.getElementById(elem))
		return d.getElementById(elem);
	else if(IE)
		return d.all.elem;
	else
		return false;
}

function ac(e1, e2) { 
	e1.appendChild(e2);
	return e1;
};

function ce(p) {
	var elem = d.createElement(p);
	if(arguments.length > 1) {
		for(var i in arguments[1]) {
			if("style" == i) {
				if(IE) {
					elem.style.setAttribute("cssText", arguments[1][i]);
				} else {
					elem.setAttribute("style", arguments[1][i]);
				}
			}
			else {
				elem.setAttribute(i, arguments[1][i]);
			}
		}
	}
	return elem;
};

/**

	Le code actif du script

**/

bind(window, "load", function() {
	ac($("myform"), ce("input", {type:"button", id:"reset", value:"Effacer"})); // Cette ligne rajoute un bouton à la fin du formulaire. (facultatif)
	bind($("reset"), "click", function() {
		$("myform").replaceChild(
			ce("input", {type:"file", id:"file"}),
			$("file")
		);
	});
});


La plus grande partie de ce script est composée uniquement de fonctions qui facilitent l'écriture du code. Le code actif est surligné.
Cette méthode comporte plusieurs avantages :
  • Seul le champ file sera remis à 0
  • Si le visiteur ne possède pas javascript, le bouton "Effacer" n'apparaitra pas

Un demi inconvénient est que laissé tel quel, le script rajoute le bouton à la fin du formulaire. Pour placer le bouton où l'on veut, il suffit de le rajouter dans le html et de supprimer la ligne correspondante dans le javascript. Par contre l'avantage cité ci-dessus ne sera plus valide :-° .

Je précise que les deux méthodes sont compatibles avec la plupart des navigateurs connus ^^

Je te laisse le soin de décider quel méthode tu préfères avec ce petit fichier d'exemple.

Enjoy :D
Édité le 25/07/2008 à 16:03:35 par Darkodam

the cake is a lie
the cake is a lie
the cake is a lie
the cake is a lie
Mammon s'était endormi. Et la bête réincarnée se répandit sur la terre et son nombre se fit légion. Et ils parlèrent au Temps et ils firent l'offrande de leur moisson au feu, avec la ruse des renards. Et ils bâtirent un nouveau monde à leur image comme le promettaient les paroles sacrées, et ils parlèrent de la bête avec leurs enfants. Lorsque Mammon se réveilla, voilà ! ce n'était plus rien qu'un disciple.
d'après Le Livre de Mozilla, 11:9
(10e Édition)


Image utilisateur
 
Hors ligne jeff52 # Posté le 25/07/2008 à 16:23:21
PHPadawan
Avatar
Groupe : Membres
Çà fait plaisir de voir que certains zéros ne font pas les choses à moitié.
Cependant je trouve que c'est trop compliqué pour faire un truc aussi simple.
Si je voulais faire ça c'est parce que sous FF3 et Safari, on ne peut pas effacer un champs "file" une fois qu'on a choisi un fichier.

Néanmoins je conserve ce post dans mes favoris au cas où.

Merci encore pour le mal que tu t'es donné. :)
 
Hors ligne Darkodam # Posté le 25/07/2008 à 16:27:07
il est à peu près deezer
Avatar
Groupe : Membres
Ce n'est pas trop compliqué. Comme je l'ai dit, le code actif ne fait qu'une dizaine de lignes, le reste n'est composé que de fonctions de ma librairie personnelle que j'ai réutilisé par "fainéantise" ^^ . je peux te faire une version light (sans toutes les fonctions), mais ça risque de faire un peu brouillon :euh: .

the cake is a lie
the cake is a lie
the cake is a lie
the cake is a lie
Mammon s'était endormi. Et la bête réincarnée se répandit sur la terre et son nombre se fit légion. Et ils parlèrent au Temps et ils firent l'offrande de leur moisson au feu, avec la ruse des renards. Et ils bâtirent un nouveau monde à leur image comme le promettaient les paroles sacrées, et ils parlèrent de la bête avec leurs enfants. Lorsque Mammon se réveilla, voilà ! ce n'était plus rien qu'un disciple.
d'après Le Livre de Mozilla, 11:9
(10e Édition)


Image utilisateur
 
Hors ligne jeff52 # Posté le 25/07/2008 à 16:43:06
PHPadawan
Avatar
Groupe : Membres
Ben j'aurais aimé pas me casser la tête pour un truc aussi futile que l'effacement d'un champs.
Je mettrais un target.value = ''; pour FF et Safari comme celà marche bien.
Et pour IE et Opéra, je mettrais rien du tout vu que je viens de remarquer qu'il est possible d'effacer le champs manuellement (contrairement à Safari et FF3 qui ouvrent directement une fenêtre de navigation lors du clic)
 
Hors ligne Darkodam # Posté le 25/07/2008 à 16:46:01
il est à peu près deezer
Avatar
Groupe : Membres
Ah ouais, pas con ^^ . Bon ben tan pis alors, je garde mon script pour une utilisation ultérieure (pour quand FF et Safari n'autoriseront plus le target.value = '' :D )

the cake is a lie
the cake is a lie
the cake is a lie
the cake is a lie
Mammon s'était endormi. Et la bête réincarnée se répandit sur la terre et son nombre se fit légion. Et ils parlèrent au Temps et ils firent l'offrande de leur moisson au feu, avec la ruse des renards. Et ils bâtirent un nouveau monde à leur image comme le promettaient les paroles sacrées, et ils parlèrent de la bête avec leurs enfants. Lorsque Mammon se réveilla, voilà ! ce n'était plus rien qu'un disciple.
d'après Le Livre de Mozilla, 11:9
(10e Édition)


Image utilisateur
 

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 112 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0916s (0.0753s)