Clear d'un input file

Télécharger le projet
Commenter

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);
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (PetoleTeam)