web-dev-qa-db-fra.com

Effacement d'un champ de téléchargement de fichier HTML via JavaScript

Je souhaite réinitialiser un champ de téléchargement de fichier lorsque l'utilisateur sélectionne une autre option.

Est-ce possible via JavaScript? Je soupçonne que l'élément de téléchargement de fichier est traité différemment car il interagit avec le système de fichiers de l'utilisateur, et est peut-être immuable.

En gros, ce que je veux, c'est quelque chose comme (pseudo-code):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;
javascriptjqueryhtmlfile-upload
55
Chris Burgess

Vous ne pouvez pas définir la valeur d'entrée dans la plupart des navigateurs, mais vous pouvez créer un nouvel élément, copier les attributs de l'ancien élément et permuter les deux.

Étant donné une forme comme:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

Le droit chemin DOM:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

Façon simple de DOM. Cela peut ne pas fonctionner dans les anciens navigateurs qui n'aiment pas les entrées de fichier:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

La manière jQuery:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

Réinitialisation du formulaire entier via jQuery: https://stackoverflow.com/a/13351234/1091947

75
Chris Hynes

Simplement maintenant, en 2014, l'élément d'entrée ayant un id supporte la fonction val('').

Pour l'entrée -

<input type="file" multiple="true" id="File1" name="choose-file" />

Cette js efface l'élément d'entrée -

$("#File1").val('');
46
Pradyut Bhattacharya

Oui, l'élément de téléchargement est protégé contre les manipulations directes dans différents navigateurs. Cependant, vous pouvez effacer l'élément de l'arborescence DOM, puis en insérer un nouveau à la place via JavaScript. Cela vous donnerait le même résultat.

Quelque chose dans le genre de:

$('#container-element').html('<input id="upload-file" type="file"/>');
8
Udo

Le code que j'ai fini par utiliser était,

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

Merci à tous pour les suggestions et les pointeurs!

5
Chris Burgess

Ils ne reçoivent pas les événements de focus, vous devrez donc utiliser une astuce comme celle-ci: le seul moyen de l'effacer consiste à vider le formulaire au complet.

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>
4
Chad Grant

aime vraiment garder les choses simples comme ça :)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');
4
dmi3y

Solution simple:

document.getElementById("upload-files").value = "";
4
Oleg

Ce jQuery a fonctionné pour moi dans IE11, Chrome 53 et Firefox 49:

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);
3
Chanaka

version plus court qui fonctionne parfaitement pour moi est le suivant:

document.querySelector('#fileUpload').value = "";
3
frank waalkens

essayez bien son travail 

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;
2
Rissa

Si vous avez ce qui suit:

<input type="file" id="FileSelect">

alors juste faire:

$("#FileSelect").val('');

pour réinitialiser ou effacer le dernier fichier sélectionné.

2
Muhammad Awais

Pour assurer la compatibilité lorsque ajax n’est pas disponible, définissez .val (''), sinon le dernier fichier téléchargé avec ajax qui est toujours présent dans l’entrée sera renvoyé. Les éléments suivants doivent effacer correctement l’entrée tout en conservant les événements .on ():

var input = $("input[type='file']");
input.html(input.html()).val('');
2
aberdat

Je sais que l'API FormData n'est pas très convivial pour les navigateurs plus anciens, mais dans de nombreux cas, vous l'utilisez (et j'espère testing pour le support ), donc cela fonctionnera bien!

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}

1
Abraham Labkovsky

Essayez ce code ...

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());
1
Niraj

la méthode testée par jQuery fonctionne bien dans FF et Chrome:

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});
1
crisupisu emil

J'ai fait face au problème avec ng2-file-upload pour angular. si vous recherchez la solution sur angular by ng2-file-upload, reportez-vous au code ci-dessous

HTML:

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

composant

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild(' activeFrameinputFile ') InputFrameVariable : ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {this. InputFrameVariable .nativeElement.value = '';};

0
Anil Kumar Dyavanapalli