Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CLEAR D'UN INPUT FILE


Information sur la source

Catégorie :Divers Classé sous : CLEAR, INPUT, FILE, INPUT FILE Niveau : Débutant Date de création : 24/10/2008 Date de mise à jour : 25/10/2008 06:45:18 Vu / téléchargé: 2 039 / 94

Note :
Aucune note

Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note


Description

But du Jeu...
- Effacer la valeur d'un INPUT type FILE propriété qui se trouve être en lecture seule, l'action Obj.value =""; n'ayant aucun effet sur certain navigateur.

Principe...
- L'idée est de créer un clone de l'INPUT type FILE au démarrage, quand sa value=""...
- Ensuite pour effacer la value il suffira de remplacer le INPUT type FILE original par son clone...

Mise en oeuvre...
- Le ou les INPUT type FILE à clearer doivent avoir au moins un attribut ID ou NAME.
- Insérer, dans votre document entre les balises <head> et </head> le fichier gfinputfile.js qui contient les fonctions, comme suit...
  <script type="text/javascript" src="gfinputfile.js"></script>

- Il vous suffit d'appeller la function Clear_Input_File, en passant en paramètre l'ID ou le NAME de l'INPUT type FILE à clearer, soit dans votre code, soit en l'associant à un événement d'un contrôle de votre document.
exemple :
  <input type="button" onclick="Clear_Input_File('I_FILE')" value="Clear">

- La création des clones se fait automatiquement au chargement du document.

 

Source

  • //------------------------
  • function Save_Input_File(){
  • //-- Recup des INPUT du document
  • var Tab = document.getElementsByTagName( 'INPUT');
  • var Nbr = Tab.length;
  • for( var i=0; i < Nbr; i++){
  • //-- pour les INPUT type FILE
  • if( Tab[i].type == 'file'){
  • //-- Recup objet a cloner
  • var O_Src = Tab[i];
  • O_Src.value = ''; // because F5 sous FireFox
  • //-- Recup id et name
  • var szId = O_Src.getAttribute('id');
  • var szName = O_Src.getAttribute('name');
  • //-- affecte id ou name si non renseigne
  • if( !szId && szName)
  • O_Src.setAttribute( 'id', szName);
  • if( szId && !szName)
  • O_New.setAttribute( 'name', szId);
  • //-- Creation d'un clone
  • var O_Clone = O_Src.cloneNode( true);
  • O_Src.parentNode.appendChild( O_Clone);
  • //-- save type de display, id et name
  • O_Clone.oldDisplay = O_Clone.style.display;
  • O_Clone.oldId = O_Src.getAttribute('id');
  • O_Clone.oldName = O_Src.getAttribute('name');
  • //-- on cache
  • O_Clone.style.display = 'none';
  • //-- new ID et NAME pour eviter les conflits
  • O_Clone.setAttribute( 'id', 'GF_' +Tab[i].id);
  • O_Clone.setAttribute( 'name', 'GF_' +Tab[i].id);
  • }
  • }
  • }
  • //-----------------------------
  • function Clear_Input_File( id_){
  • //-- Recup l'objet source
  • var O_Src = document.getElementById( id_);
  • if( O_Src){
  • //-- Recup l'objet clone
  • var O_Clone = document.getElementById( 'GF_' +id_);
  • //-- Creation d'un clone du clone
  • var O_New = O_Clone.cloneNode( true);
  • //-- Ajout du clone
  • O_Src.parentNode.appendChild( O_New);
  • //-- Remplacement du INPUT FILE par le clone
  • O_Src.parentNode.replaceChild( O_New, O_Src);
  • //-- Restaure id, name et affiche
  • O_New.setAttribute( 'id', O_Clone.oldId);
  • O_New.setAttribute( 'name', O_Clone.oldName);
  • O_New.style.display = O_Clone.oldDisplay;
  • }
  • }
  • //---------------------------------------------
  • function Add_Event( obj_, event_, func_, mode_){
  • if( obj_.addEventListener)
  • obj_.addEventListener( event_, func_, mode_? mode_:false);
  • else
  • obj_.attachEvent( 'on'+event_, func_);
  • }
  • //-- Ajout evenement sur onload
  • Add_Event( window, 'load', Save_Input_File);
//------------------------
function Save_Input_File(){
  //-- Recup des INPUT du document
  var Tab = document.getElementsByTagName( 'INPUT');
  var Nbr = Tab.length;
  for( var i=0; i < Nbr; i++){
    //-- pour les INPUT type FILE
    if( Tab[i].type == 'file'){
      //-- Recup objet a cloner
      var O_Src = Tab[i];
      O_Src.value = '';  // because F5 sous FireFox
      //-- Recup id et name
      var szId   = O_Src.getAttribute('id');
      var szName = O_Src.getAttribute('name');
      //-- affecte id ou name si non renseigne
      if( !szId && szName)
        O_Src.setAttribute( 'id', szName);
      if( szId && !szName)
        O_New.setAttribute( 'name', szId);
      //-- Creation d'un clone
      var O_Clone = O_Src.cloneNode( true);
      O_Src.parentNode.appendChild( O_Clone);
      //-- save type de display, id et name
      O_Clone.oldDisplay = O_Clone.style.display;
      O_Clone.oldId      = O_Src.getAttribute('id');
      O_Clone.oldName    = O_Src.getAttribute('name');
      //-- on cache
      O_Clone.style.display = 'none';
      //--  new ID et NAME pour eviter les conflits
      O_Clone.setAttribute( 'id',   'GF_' +Tab[i].id);
      O_Clone.setAttribute( 'name', 'GF_' +Tab[i].id);
    }
  }
}
//-----------------------------
function Clear_Input_File( id_){
  //-- Recup l'objet source
  var O_Src  = document.getElementById( id_);
  if( O_Src){
    //-- Recup l'objet clone
    var O_Clone  = document.getElementById( 'GF_' +id_);
    //-- Creation d'un clone du clone
    var O_New = O_Clone.cloneNode( true);
    //-- Ajout du clone
    O_Src.parentNode.appendChild( O_New);
    //-- Remplacement du INPUT FILE par le clone
    O_Src.parentNode.replaceChild( O_New, O_Src);
    //-- Restaure id, name et affiche
    O_New.setAttribute( 'id',   O_Clone.oldId);
    O_New.setAttribute( 'name', O_Clone.oldName);
    O_New.style.display = O_Clone.oldDisplay;
  }
}
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//-- Ajout evenement sur onload
Add_Event( window, 'load', Save_Input_File);

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

25 octobre 2008 06:45:18 :
Après avoir compris ce que disait XtremDuke, je suis parfois long à comprendre, suppression de la variable globale complètement inutile.

Commentaires et avis

signaler à un administrateur
Commentaire de XtremDuke le 24/10/2008 17:09:54

Suis pas très fan d'avoir une variable d'enviro qui peut-être me servira jamais. Pourquoi ne pas faire tout le traitement lors du clear ?

signaler à un administrateur
Commentaire de PetoleTeam le 24/10/2008 17:21:46

Salut XtremDuke
qu'appelles tu une variable enviro...
;O)

signaler à un administrateur
Commentaire de XtremDuke le 24/10/2008 17:51:11

var T_Clone = new Array(); // Tableau des clones du document

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 ?

signaler à un administrateur
Commentaire de PetoleTeam le 24/10/2008 18:03:42

var T_Clone permet une récupération multiple, au cas ou il y ait plusieurs INPUT type FILE dans le document.

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

signaler à un administrateur
Commentaire de Arto_8000 le 25/10/2008 01:46:38

Utiliser un input de type reset n'est pas suffisant ?

signaler à un administrateur
Commentaire de PetoleTeam le 25/10/2008 06:47:26

Salut Arto_8000,
Oui mais ce sont dans ce cas toutes les données du formulaire qui seront effacées.
;O)

signaler à un administrateur
Commentaire de LeFauve42 le 27/10/2008 08:51:15

Tu peux creer un input vide avec quelques lignes de Javascript en utilisant le DOM (beaucoup moins enutilisant prototype ou n'importe quel framework de base).

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 = '<input name="yyy", type="file">';

Eric

signaler à un administrateur
Commentaire de nickadele le 27/10/2008 12:50:45 administrateur CS

Bonjour,

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

signaler à un administrateur
Commentaire de bultez le 27/10/2008 14:16:05


bonjour,

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.

signaler à un administrateur
Commentaire de XtremDuke le 27/10/2008 15:26:49

On peut quand même faire plus court en utilisant la fonction reset() du noeud form :

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

signaler à un administrateur
Commentaire de LeFauve42 le 27/10/2008 15:41:55

Tres elegante solution XtremDuke !

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)

signaler à un administrateur
Commentaire de XtremDuke le 27/10/2008 15:48:13

Effectivement LeFauve42, ça doit pouvoir se faire.
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.

signaler à un administrateur
Commentaire de nickadele le 27/10/2008 16:23:39 administrateur CS

XtremDuke,

"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

signaler à un administrateur
Commentaire de XtremDuke le 27/10/2008 16:34:50

@nickadele :

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.

signaler à un administrateur
Commentaire de PetoleTeam le 27/10/2008 18:54:48

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

signaler à un administrateur
Commentaire de lgh le 01/11/2008 14:25:38

Bonjour à tous,
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 = "<input type=\"file\" value=\"\">";
et le tour est joué.
Salut,

signaler à un administrateur
Commentaire de PetoleTeam le 07/11/2008 12:03:30

Bonjour,
pas sur d'avoir tout compris...
La solution d'XtremDuke restant à mon goût toujours la meilleure.
;O)

signaler à un administrateur
Commentaire de balou91 le 22/04/2009 15:00:29

bonjour,

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 :<input type='file'  name='nomidchamp"+num+"' id='nomidchamp"+num+"' value=''/>";
contenu=contenu+"[<a href='javascript:rstfile("+num+")'>annuler</a>]";
document.getElementById("infile"+num).innerHTML=contenu;
}

- dans le formulaire nos champs input file dans des div

<div id="infile1">
<input type="file"  name="nomidchamp1" id="nomidchamp1" value=""/>
        [<a href="javascript: rstfile(1)" >annuler</a>]
</div>
<div id="infile2">
<input type="file"  name="nomidchamp2" id="nomidchamp2" value=""/>
        [<a href="javascript: rstfile(2)" >annuler</a>]
</div>
<div id="infile3">
<input type="file"  name="nomidchamp3" id="nomidchamp3" value=""/>
        [<a href="javascript: rstfile(3)" >annuler</a>]
</div>

et 'oilà ! je trouve ça plus simple et plus efficace

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Value d'un input type file [ par mickelo ] Bonjour a tous. tout d'abord merci de donner un peu de votre temps pour le forum c top. (et pour moi aussi)Voila moi je recupere dans une variable asp champ input file valeur par défaut [ par Tatopoulos ] Bonjour,Est-il possible de mettre une valeur par d&#233;faut dans un champ de formulaire "input file" et si oui merci de me donner un exemple. sauvegardé la valeur d'un input file [ par Ankaa1988 ] Bonjour à tous, voila je suis en train de faire un script et pour des raisons un peu longue à expliquer j'ai besoin de sauvegarder (voire copier) un i problème input file [ par titia80000 ] Bonjour,je dois faire un formulaire en html 4 strict avec du javascript, j'ai input file qui récupère l'adresse d'une image et lorsque je clic sur un input type file sur opera [ par fonetiklilian ] lilian input file et chemin absolu [ par bultez ] Bonjour à toutes et à tous,&lt;input    type="file"            onchange="alert(this.value);" /&gt;je crois qu'avec IE,K-Meleon,Safari on affiche le ch Récupérer valeur input type file [ par rom268 ] Bonjour, je dois récupérer la valeur d'un input file afin d'enregistrer le chemin en entier. PHP ne peut que récupérer le nom de fichier, il me faud Extension automatique d'un input text [ par bricklebrit ] Bonjour à tous,Je ne suis pas sûr d'écrire dans la bonne rubrique mais je tente toujours :)Je suis en train de créer un site avec un moteur de recherc envoyer un champ input text via ajax pour tchat [ par iznobe2601 ] ça fait plusieurs jours que je galere avec ce truc là qui je suis sur est simple pour vous donc pour un tchat simple live en ajax , j ' ai un champ in Controler la saisie d'un input [ par nandofive ] Bonjour,Je voudrai savoir si il est possible de contrôler la saisie d'un "input" pour que la valeur soit une valeur numérique comprise entre 0.50 et 1


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,889 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.