web-dev-qa-db-fra.com

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

Je veux effacer le fichier saisi 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 : J'aimerais éviter de recharger la page, de réinitialiser le formulaire ou d'effectuer un appel AJAX.

Est-ce possible?

javascripthtml
100
user188962

Pourquoi ne pas supprimer ce noeud et en créer un nouveau portant le même nom?

13
DFectuoso

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

  1. set value property à 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 des écouteurs d'événement et des propriétés expando.

  3. Réinitialise 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. Cela fonctionne pour tous les navigateurs.

J'ai écrit une fonction javascript. demo: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);
        }
    }
}
148
cuixiping

Que diriez-vous:

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

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

Quoi qu'il en soit, cela fonctionne avec IE9>, Firefox et Opera.
Avec Webkit, il semble que je ne sois pas en mesure de le reconvertir en fichier.
Avec IE8, il génère une exception de sécurité. 

Edit: Pour webkit, Opera et firefox, cela fonctionne, cependant:

input.value = '';

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

Je verrai si je peux trouver un moyen plus propre de faire ce navigateur sans passer par le 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, Opéra 12, IE7, IE8, IE9 et IE10.

49
brunoais

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

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

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

Voici donc la fonction javascript Vanilla que j’ai écrite et qui fonctionne sur FireFox (27 et 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... seuls les navigateurs actuellement disponibles pour tester avec.

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

Le paramètre ctrl est l’entrée du fichier lui-même, donc la fonction serait appelée comme ...

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

Définir la valeur sur '' ne fonctionne pas dans tous les navigateurs.

Au lieu de cela, essayez de définir la valeur sur null comme ceci:

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

EDIT: Je vois les raisons de sécurité très valables qui empêchent JS de définir l’entrée du fichier, mais il semble raisonnable de prévoir un mécanisme simple pour effacer déjà en sélectionnant la sortie. J'ai essayé d'utiliser une chaîne vide mais cela ne fonctionnait pas dans tous les navigateurs, NULL fonctionnait dans tous les navigateurs que j'avais essayés (Opera, Chrome, FF, IE11 + et Safari).

EDIT: .__ Veuillez noter que le réglage sur NULL fonctionne sur tous les navigateurs alors que le réglage sur une chaîne vide ne l’a pas été.

26
BigMac66

Vous devez le remplacer par une nouvelle entrée de fichier . Voici comment procéder 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() );
12
Jamland

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 this jsFiddle pour le code et la démonstration.

LIENS

12
Gyrocode.com
document.getElementById('your_input_id').value=''

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

7
Soufiane Hassou

J'avais le même problème et je suis venu avec cela. 

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>

3
ajit kumar

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

  1. Je n'aime pas avoir à wrap la input d'abord et ensuite obtenir le code HTML, il est très impliqué et sale.

  2. Le navigateur JS croisé est pratique et il semble que dans ce cas, il y a trop d'inconnus pour utiliser de manière fiable la commutation type (qui, encore une fois, est un peu sale) et pour définir value à ''

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. Aucun emballage maladroit ou changement de type
  3. Compatibilité entre navigateurs (corrigez-moi si je me trompe ici)

Résultat: Programmeur heureux

2
Mosselman

Je cherchais un moyen simple et propre de supprimer les entrées HTML, les réponses ci-dessus sont excellentes, mais aucune d’entre elles ne répond vraiment à ce que je cherche, jusqu’à ce que je tombe sur le Web avec un moyen simple et élégant 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>

1
chebaby

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

La structure du formulaire est la suivante: form => label, input et submit button. Une fois que nous avons choisi un fichier, le nom de fichier sera indiqué par l'étiquette en le faisant manuellement en JavaScript. 

Ma stratégie est donc la suivante: initialement, la variable button de soumission est désactivée. Une fois le fichier choisi, l'attribut disabled du bouton de soumission est supprimé de manière à ce que je puisse soumettre le fichier. Après avoir envoyé ma candidature, j'efface la label, ce qui donne l'impression que je supprime le fichier input, mais en réalité non. Ensuite, je désactiverai à nouveau le bouton d'envoi pour empêcher l'envoi du formulaire.

En définissant submit buttondisable ou non, j’arrête le fichier soumis plusieurs fois, à moins que je ne choisisse un autre fichier. 

0
user419050

Ce qui m'a aidé, c'est d'essayer d'extraire et de télécharger le dernier fichier sélectionné à l'aide d'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. 

0
dotRag

C'est en fait assez facile.

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