CLEAR D'UN INPUT FILE
XtremDuke
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
-
24 oct. 2008 à 17:09
cs_balou91 Messages postés 1 Date d'inscription lundi 22 décembre 2003 Statut Membre Dernière intervention 22 avril 2009 - 22 avril 2009 à 15:00
cs_balou91 Messages postés 1 Date d'inscription lundi 22 décembre 2003 Statut Membre Dernière intervention 22 avril 2009 - 22 avril 2009 à 15:00
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/48294-clear-d-un-input-file
https://codes-sources.commentcamarche.net/source/48294-clear-d-un-input-file
22 avril 2009 à 15:00
j'ai testé la solution "innerHTML" proposée par LGH et c'est de loin la plus simple à mettre en oeuvre. La solution initiale ne fonctionnait pas dans mon script ( les champs input type "file" étaient crées pas un script PHP ).
- on a donc en javascript une fonction de reset du champ :
function rstfile(num){
contenu="fichier :";
contenu=contenu+"[[javascript: rstfile(1) annuler]]
[[javascript: rstfile(2) annuler]]
[[javascript: rstfile(3) annuler]]
et 'oilà ! je trouve ça plus simple et plus efficace
7 nov. 2008 à 12:03
pas sur d'avoir tout compris...
La solution d'XtremDuke restant à mon goût toujours la meilleure.
;O)
1 nov. 2008 à 14:25
J'ai déjà plancher sur le problème et j'ai deux solutions à proposées:
IE:
l'adresse contenu dans l'input est utilisée par une fonction attribuée à l'événement "onchange". L'input de type file possédant un nom et/ou un Id, il suffit de finir la fonction de la façon suivante:
file.focus();
file.select();
document.execCommand('delete');
Tous navigateur:
Placez l'input de type file dans un bloc de type span ou div et de même; à la fin de la fonction attribuée à l'évènement "onchange" écrire:
document.getElementById('span' ou div).inner HTML = "";
et le tour est joué.
Salut,
27 oct. 2008 à 18:54
...quick and dirty pas sur...
de passer par innerHTML n'est pas aussi simple que cela car il te faut au préalable récupérer les attributs pour en faire une vrai copie.
Ceci m'améne à dire
-> nickadele
selon mes test, la class et tous les attributs sont clonés même les plus olé olé...
mon souhait était bien, comme toujours, de s'affranchir des caprices des différents browsers
-> XtremDuke
mais pourquoi n'ai je pas poussé mon raisonnement jusqu'au bout et utilisé la méthode reset des FORMs,
juste une chose je passerai l'ID de l'imput en paramètre et non l'objet lui même.
-> LeFauve42
cela ne marche pas car dans ce cas l'input est ajouté à la fin, ce qui n'est pas le but recherché.
CONCLUSION
La vrai seule solution élégante et rapide est celle de XtremDuke.
Créer un fonction et passez la au XtremDuke_ZIPPEUR et vous verrez le résultat...
encore bravo...
27 oct. 2008 à 16:34
Dans des applis locales, ça m'est déjà arrivé de m'intéresser uniquement à la valeur du champ afin qu'il soit traité par HttpRequest et non au fichier auquel il pointe. Maintenant, et je te l'accorde, c'est un cas assez rare.
27 oct. 2008 à 16:23
"Il se peut même qu'il ne soit pas dans un formulaire." >> ok mais dans ce cas cela n'as plus aucun sens, quel est l'intérêt d'un input file s'il n'est pas dans un formulaire ?
Nickadele
27 oct. 2008 à 15:48
Cependant, attention à "var oldForm = input.parentNode;". L'input n'est rarement un enfant direct du formulaire. Il se peut même qu'il ne soit pas dans un formulaire.
27 oct. 2008 à 15:41
Mais si tu vas par la, est-ce que tu es vraiment oblige de cloner l'input ? Ne serais-ce pas possible simplement de changer son form pour la reseter et ensuite la reassigner au bon form. Quelque-chose comme ca :
function clearFile(input){
var oldForm = input.parentNode;
var tmpForm = document.createElement('form');
tmpForm.style.display = 'none';
document.body.appendChild(tmpForm);
tmpForm.appendChild(input); // Le appendChild() detache l'input de son ancien parent
tmpForm.reset();
oldForm.appendChild(input);
tmpForm.parentNode.removeChild(tmpForm);
}
Je ne suis pas non plus sur que le form temporaire doive etre rattache au body pour pouvoir etre resete, ce qui ferait encore plus court...
Enfin, ca reste bien plus long qu'avec innerHTML ;o)
27 oct. 2008 à 15:26
function clearFile(input){
var newInput = input.cloneNode(true);
var tmpForm = document.createElement('form');
tmpForm.style.display = 'none';
document.body.appendChild(tmpForm);
tmpForm.appendChild(newInput);
tmpForm.reset();
input.parentNode.replaceChild(newInput, input);
tmpForm.parentNode.removeChild(tmpForm);
}
27 oct. 2008 à 14:16
fallait y penser, le concevoir et l'écrire !
très instructif ( adapter ce principe pour
d'autres 'applications' peut servir )
du coup... d'autres pistes apparaissent pour effacer
le contenu d'un input file :
celle proposée par LeFauve ( remplacer l'innerHTML
d'un div ) semble elle aussi "intéressante"
et peut convenir.
Bul.
27 oct. 2008 à 12:50
Pour avoir déjà joué avec le input file, je peux vous dire que ce code me semble être la meilleure solution.
Il faut savoir que chaque browser gére l'input file de manière différente.
Ex : Safari autorise que l'on assigne une valeur !
Je pense que le souhait de PetoleTeam était de présenter une solution qui passe sous chaque browser.
Seul petit bémol à ce code, il ne reprend pas toutes les propriétés de l'input d'origine tel que "Class" par exemple.
Moi je dis très bien !
Nickadele
27 oct. 2008 à 08:51
Voire meme, pour une solution quick and dirty, si tu mets ton input dans un div ou un span avec un id "x", tu dois pouvoir t'en sortir avec un truc aussi simple que:
var container=document.getElementById('x');
if(container) container.innerHTML = '';
Eric
25 oct. 2008 à 06:47
Oui mais ce sont dans ce cas toutes les données du formulaire qui seront effacées.
;O)
25 oct. 2008 à 01:46
24 oct. 2008 à 18:03
Lors de l'action clear, il est trop tard pour créer un clone vierge, si un INPUT type FILE a déjà servi, il devient donc impératif de les cloner sur le onload...
L'idée de départ est venu d'une question sur le forum
http://www.javascriptfr.com/forum/sujet-PETIT-PROBLEME-JAVASCRIPT_1215846.aspx
24 oct. 2008 à 17:51
Est-ce vraiment nécessaire ?
Avec le "peu" d'actions qu'il y a, ne peut-on pas exécuter l'ensemble lors de l'événement Clear ?
24 oct. 2008 à 17:21
qu'appelles tu une variable enviro...
;O)
24 oct. 2008 à 17:09