Clear d'un input file

Soyez le premier à donner votre avis sur cette source.

Vue 8 813 fois - Téléchargée 306 fois

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


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 22 décembre 2003
Statut
Membre
Dernière intervention
22 avril 2009

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 :";
contenu=contenu+"[[javascript: rstfile(1) annuler]]

[[javascript: rstfile(2) annuler]]

[[javascript: rstfile(3) annuler]]

et 'oilà ! je trouve ça plus simple et plus efficace
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
pas sur d'avoir tout compris...
La solution d'XtremDuke restant à mon goût toujours la meilleure.
;O)
Messages postés
41
Date d'inscription
vendredi 23 mai 2003
Statut
Membre
Dernière intervention
8 avril 2009

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 = "";
et le tour est joué.
Salut,
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
-> 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...
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
@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.
Afficher les 18 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.