Comment puis-je effacer une entrée de fichier HTML avec JavaScript?

Je souhaite effacer l'entrée de fichier dans mon formulaire.

Je sais comment définir les sources sur la même méthode ... Mais cette méthode n'effacera pas le chemin du fichier sélectionné.

Remarque : je voudrais éviter d'avoir à recharger la page, réinitialiser le formulaire ou effectuer un appel AJAX.

Est-ce possible?

Pourquoi ne pas supprimer ce nœud, en créer un nouveau avec le même nom?

Il existe 3 façons d'effacer l'entrée de fichier avec javascript:

1. définissez la propriété value sur vide ou null.

   Fonctionne pour IE11 + et d'autres navigateurs modernes.

2. Créez un nouvel élément d'entrée de fichier et remplacez l'ancien.

   L'inconvénient est que vous perdrez les écouteurs d'événements et les propriétés d'expansion.

3. Réinitialisez le formulaire du propriétaire via la méthode form.reset ().

   Pour éviter d'affecter d'autres éléments d'entrée dans le même formulaire propriétaire, nous pouvons créer un nouveau formulaire vide et ajouter l'élément d'entrée de fichier à ce nouveau formulaire et le réinitialiser. Cette méthode fonctionne pour tous les navigateurs.

J'ai écrit une fonction javascript. démo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : Pour les navigateurs modernes, utilisez simplement

input.value = '';

Ancienne réponse:

Que diriez-vous:

input.type = "text";
input.type = "file";

Je dois encore comprendre pourquoi cela ne fonctionne pas avec Webkit .

Quoi qu'il en soit, cela fonctionne avec IE9>, Firefox et Opera.
La situation avec Webkit est que je semble ne pas pouvoir le remettre en fichier.
Avec IE8, la situation est qu'il lève une exception de sécurité.

Edit: Pour Webkit, Opera et Firefox, cela fonctionne, cependant:

input.value = '';

(vérifiez la réponse ci-dessus avec cette proposition)

Je vais voir si je peux trouver une manière plus propre de faire ce cross-browser sans avoir besoin du GC.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Fonctionne avec la plupart des navigateurs. Ne fonctionne pas avec IE <9, c'est tout.
Testé sur Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 et IE10.

La définition de la valeur sur ''ne fonctionne pas dans tous les navigateurs.

Essayez plutôt de définir la valeur nullcomme suit:

document.getElementById('your_input_id').value= null;

EDIT: J'obtiens les raisons de sécurité très valables pour ne pas autoriser JS à définir l'entrée de fichier, mais il semble raisonnable de fournir un mécanisme simple pour effacer déjà la sélection de sortie. J'ai essayé d'utiliser une chaîne vide mais cela ne fonctionnait pas dans tous les navigateurs, NULLfonctionnait dans tous les navigateurs que j'ai essayés (Opera, Chrome, FF, IE11 + et Safari).

EDIT: Veuillez noter que le réglage sur NULLfonctionne sur tous les navigateurs tandis que le réglage sur une chaîne vide ne l'a pas fait.

Malheureusement, aucune des réponses ci-dessus ne semble couvrir toutes les bases - du moins pas avec mes tests avec javascript vanille.

• .value = nullsemble fonctionner sur FireFox, Chome, Opera et IE11 (mais pas IE8 / 9/10 )

• .cloneNode(et .clone()dans jQuery) sur FireFox semble copier le .valuedessus, rendant ainsi le clone inutile.

Voici donc la fonction javascript vanille que j'ai écrite qui fonctionne sur FireFox (27 et 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... ce sont les seuls navigateurs actuellement disponibles à moi de tester avec.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

Le ctrlparamètre est l'entrée de fichier elle-même, donc la fonction serait appelée comme ...

clearFileInput(document.getElementById("myFileInput"));

SOLUTION

Le code suivant a fonctionné pour moi avec jQuery. Il fonctionne dans tous les navigateurs et permet de conserver les événements et les propriétés personnalisées.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Voir ce jsFiddle pour le code et la démonstration.

LIENS

• Effacer <input type = 'file' /> à l'aide de jQuery

• Comment réinitialiser l'entrée de fichier avec JavaScript

Vous devez le remplacer par une nouvelle entrée de fichier. Voici comment cela peut être fait avec jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

et utilisez cette ligne lorsque vous devez effacer le champ de saisie (sur un événement par exemple):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Edit:
Celui-ci ne fonctionne pas dans IE et Opera, mais semble fonctionner pour Firefox, Safari et Chrome.

J'avais le même problème et j'ai trouvé ça.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

C'est en fait assez simple.

document.querySelector('#input-field').value = '';

Je cherchais un moyen simple et propre d'effacer l'entrée de fichier HTML, les réponses ci-dessus sont excellentes, mais aucune d'entre elles ne répond vraiment à ce que je recherche, jusqu'à ce que je tombe sur le Web avec une manière simple et élégante de le faire:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

tout le mérite revient à Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

Les réponses ci-dessus offrent des solutions quelque peu maladroites pour les raisons suivantes:

1. Je n'aime pas avoir wraple inputpremier et ensuite obtenir le html, c'est très compliqué et sale.

2. Cross browser JS est pratique et il semble que dans ce cas, il y ait trop d'inconnues pour utiliser de manière fiable la typecommutation (qui, encore une fois, est un peu sale) et le réglage valuesur''

Je vous propose donc ma solution basée sur jQuery:

$('#myinput').replaceWith($('#myinput').clone())

Il fait ce qu'il dit, il remplace l'entrée par un clone de lui-même. Le clone n'aura pas le fichier sélectionné.

Avantages:

1. Code simple et compréhensible
2. Pas d'emballage maladroit ni de changement de type
3. Compatibilité cross browser (corrigez-moi si je me trompe ici)

Résultat: programmeur heureux

Voici mes deux cents, les fichiers d'entrée sont stockés sous forme de tableau, voici comment l'annuler

document.getElementById('selector').value = []

cela renvoie un tableau vide et fonctionne sur tous les navigateurs

Ce qui m'a aidé, c'est que j'ai essayé de récupérer et de télécharger le dernier fichier sélectionné en utilisant une boucle, au lieu de vider la file d'attente, et cela a fonctionné. Voici le code.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

J'espère que cela pourrait aider certains.

J'ai essayé la plupart des solutions, mais il ne semblait que personne ne fonctionnait. Cependant, j'ai trouvé une promenade pour cela ci-dessous.

La structure du formulaire est: form=> label, inputet submit button. Après avoir choisi un fichier, le nom du fichier sera affiché par l'étiquette en le faisant manuellement dans JavaScript.

Ma stratégie est donc la suivante: initialement, la soumission buttonest désactivée, après qu'un fichier est choisi, l' disabledattribut du bouton d' envoi sera supprimé de sorte que je puisse soumettre le fichier. Après avoir soumis, j'efface le, labelce qui donne l'impression d'effacer le fichier, inputmais ce n'est pas le cas. Ensuite, je désactiverai à nouveau le bouton d'envoi pour éviter de soumettre le formulaire.

En définissant la soumission button disableou non, j'arrête la soumission du fichier plusieurs fois, sauf si je choisis un autre fichier.

J'ai changé pour taper du texte et revenir à taper dans un fichier en utilisant setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

Il input.value = nulls'agit d'une méthode de travail, mais elle ne déclenchera l' changeévénement d'entrée que si elle est appelée à partir d'un onclickévénement.

La solution à cela serait d'appeler ce onchangegestionnaire manuellement chaque fois que vous devez réinitialiser l'entrée.

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);