web-dev-qa-db-fra.com

comment réinitialiser <input type = "file">

Je développe une application de métro avec VS2012 et Javascript

Je veux réinitialiser le contenu de mon entrée de fichier:

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

Comment devrais-je faire ça?

javascriptvisual-studio-2012winjs
296
Jesus

La solution jQuery que @ dhaval-marthak a publiée dans les commentaires fonctionne évidemment, mais si vous regardez le véritable appel jQuery, il est assez facile de voir ce que jQuery fait, il suffit de définir l'attribut value sur une chaîne vide. Donc, en JavaScript "pur", ce serait:

document.getElementById("uploadCaptureInputFile").value = "";
276
jakerella

Vous devez insérer les balises <input type = “file”> dans les balises <form> pour pouvoir ensuite réinitialiser la saisie en réinitialisant votre formulaire:

onClick="this.form.reset()"
73
levkaster

C'est la meilleure solution:

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

De toutes les réponses ici c'est la solution la plus rapide. Aucun clone d'entrée, aucune réinitialisation de formulaire! 

Je l'ai vérifié dans tous les navigateurs (il a même un support IE8).

56
Maxmaxmaximus

Vous pouvez simplement le cloner et le remplacer par lui-même, avec tous les événements encore attachés:

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

et

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

Merci: Css-tricks.com

38
pixparker

Si vous avez les éléments suivants:

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

alors juste faire:

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

pour réinitialiser le contrôle de fichier.

35
sstauross

Une autre solution (sans sélectionner les éléments HTML DOM)

Si vous avez ajouté l'écouteur d'événement 'change' à cette entrée, vous pouvez appeler en code javascript (pour certaines conditions spécifiées): 

event.target.value = '';

Par exemple en HTML:

<input type="file" onChange="onChangeFunction(event)">

Et en javascript:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }
33
indreed

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 = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

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

LIENS

Voir Comment réinitialiser l’entrée de fichier avec JavaScript pour plus d’informations.

26
Gyrocode.com

Réinitialiser un bouton de téléchargement de fichier est si facile avec JavaScript pur !

Il y a peu de façons de le faire, mais le moyen le plus simple et le plus simple, qui fonctionne bien dans de nombreux navigateurs, est de changer la valeur archivée en rien. code ci-dessous, il suffit de vérifier (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}
<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

16
Alireza

Je l'utilise pour vuejs 

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''
8
anson

Avec IE 10 J'ai résolu le problème avec:

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

où :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>
5
Alvaro Joao

Il suffit d'utiliser:

$('input[type=file]').val('');
3
deepak shinde

Il y a beaucoup d'approches et je suggérerais d'y aller avec une référence à l'attachement.

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

pour effacer la valeur après la soumission.

this.fileInput.value = "";
2
Sourabh Bhutani

Vous devriez essayer ceci:

$("#uploadCaptureInputFile").val('');
2
Muhammad Awais

Vous ne pouvez pas le réinitialiser car il s’agit d’un fichier en lecture seule. vous pouvez le cloner pour résoudre le problème. 

2
Ducaz035

Avec angular, vous pouvez créer une variable de modèle et définir la valeur sur null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

Ou vous pouvez créer une méthode pour réinitialiser comme ceci 

composant.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

modèle

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

stackblitz demo

1
malbarmawi

solution jQuery:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });
1
panatoni

Cela pourrait être fait comme ça

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function(){
inputfile.replaceWith(inputfile.val('').clone(true));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>

1
Fraz Abbas
var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));
0
Kld

Fonctionne aussi pour les contrôles dynamiques.

Javascript

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});
0
Arun Prasad E S

function resetImageField() {
      var $el = $('#uploadCaptureInputFile');                                        $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>

0
Md. Abu Bakker Siddique

Si vous avez plusieurs fichiers dans votre formulaire mais que vous ne souhaitez que l'un d'eux soit réinitialisé: 

si vous utilisez boostrap, jquery, filestyle pour afficher le formulaire de fichier d'entrée:

$("#"+idInput).filestyle('clear');
0
user6087223
document.getElementById('uploadFile').value = "";

Cela fonctionnera, mais si vous utilisez AngularIl dira "La propriété 'valeur' ​​n'existe pas sur le type 'HTMLElement'.any"

document.getElementById () renvoie le type HTMLElement qui ne contient pas de propriété value. Alors, lancez-le dans HTMLInputElement

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";
0
P Satish Patro