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


401

Je développe une application metro 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 dois-je faire ça?


1
Qu'entendez-vous par contenu?
Maess

3
voulez-vous dire, après que l'utilisateur a sélectionné un fichier, vous souhaitez réinitialiser le fichier sélectionné à "rien"?
ddavison

9
Copie

14
il semble qu'un simple inputElement.value = ""fasse très bien l'affaire sans avoir recours au clonage ou à l'emballage comme suggéré. Travaille en CH (46), IE (11) et FF (41)
Robert Koritnik

Réponses:


373

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

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

15
Merci! Si vous avez déjà la référence jquery de toute façon, $ input.val ("") fonctionnera comme d'habitude.
Natan

@ 2ndGAB Hmm ... Je n'ai que 45.0.1 donc je ne peux pas tester ... quelqu'un d'autre?
Jordan Kasper

@ 2ndGAB Correction, My Firefox vient d'être mis à jour vers 46.0.1 et ce code y fonctionne toujours. Pouvez-vous confirmer?
Jordan Kasper

@jakerella c'est étrange, pour moi, définir une valeur de sélecteur de fichier d'entrée déclenche une exception de sécurité. La seule solution que j'utilise avec succès est$(#myfileselector).trigger('fileselect', [1, ""]);
fralbo

3
input.type = ''; input.type = 'file'; // profiter
Maxmaxmaximus

81

Vous devez encapsuler <input type = “file”>dans les <form>balises, puis vous pouvez réinitialiser la saisie en réinitialisant votre formulaire:

onClick="this.form.reset()"

7
C'est la méthode correcte. Il fonctionne dans tous les navigateurs et n'entre pas en conflit avec les protections que les navigateurs implémentent pour empêcher les scripts escrocs de jouer avec la valeur de l'entrée de fichier.
Eugene Ryabtsev

9
Un peu cool, pas pour moi cependant, car cela réinitialise également d'autres champs de ce formulaire.
Starwave

2
Une solution jQuery similaire pourrait être $("form").get(0).reset();. Le .get(0)renverra l'élément de formulaire réel afin que vous puissiez utiliser la reset()fonction.
teewuane

74

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 prend même en charge IE8).


4
Y a-t-il une raison spécifique pour réinitialiser le input.typetrop? Définir uniquement la valeur ''donne le résultat attendu.
Harshita Sethi

Déclenche-t-il un onchangeévénement dans MS Edge?
hotohoto

@hotohoto je ne sais pas, j'ai un mac os)
Maxmaxmaximus

1
Cela a besoin de plus de votes positifs ou quelque chose, j'ai mis beaucoup trop de temps à trouver cette réponse, c'est la seule que j'ai trouvée qui fonctionne sur IE.
sch

input.value = '' lève une exception sur la console dans IE11. Cependant, la réinitialisation de input.type fonctionne sur tous les navigateurs sans aucune erreur.
Miroslav Jasso

45

Si vous avez les éléments suivants:

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

alors faites juste:

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

pour réinitialiser le contrôle de fichier.


6
Meilleure solution à mon humble avis.
Serhii Maksymchuk

3
Ou utilisez DOM:inputFileEl.value = '';
Ninh Pham

44

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

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

et

var input = $("#control");

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

Merci: Css-tricks.com


1
Malheureusement, cela ne réinitialise pas la valeur d'entrée, voir ce jsFiddle . Pour une meilleure solution, consultez cette réponse .
Gyrocode.com

1
@ Gyrocode.com Ce jsFiddle ne fonctionne pas si l'image est téléchargée une deuxième fois après la réinitialisation.
Sarthak Singhal

2
@SarthakSinghal, Malheureusement vous avez écrit le mauvais code, vous auriez dû faire jsfiddle.net/cL1LooLe
Roger Russel

2
@RogerRussel: Exactement ... Je me demandais pourquoi les réponses supérieures disaient que cela ne fonctionne qu'une seule fois, ce qui indique clairement qu'une sorte de référence est en train de disparaître. Et c'était en fait le cas parce que le initialement créé la référence d'entrée qui a ensuite été remplacée par un nouvel élément d'entrée.
Robert Koritnik

1
Réinitialiser le valuemême dans d'autres réponses semble beaucoup plus simple que de manipuler le DOM.
CodeFinity

40

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

Si vous avez ajouté l'écouteur d'événement 'change' sur cette entrée, alors dans le code javascript, vous pouvez appeler (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.');
  }

Une autre façon d'angular2: stackoverflow.com/questions/40165271/…
Belter

Cela ne fonctionnera que sur les noms de fichiers qui ne contiennent qu'un seul .devant l'extension de fichier.
Ma Kobi

C'est vrai, j'ai édité le code et fourni une approche plus universelle pour obtenir une extension de fichier.
indreed le

31

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

LIENS

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


1
@alessadro, non, juste un élément <input type="file">avec un ID spécifique.
Gyrocode.com

Merci de clarifier votre réponse :) +1
candlejack

1
C'est la solution la plus propre et la plus compatible avec les navigateurs que j'ai trouvée à ce jour - merci.
Pat

25

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

Il y a peu de façons de le faire, mais la manière simple et efficace qui fonctionne bien dans de nombreux navigateurs est de changer la valeur déposée en rien, de cette façon le téléchargement déposé est réinitialisé, essayez également d'utiliser du javascript pur plutôt que n'importe quel cadre, j'ai créé le code ci-dessous, il suffit de le vérifier (ES6):

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


comment faire avec jquery
Anand Choudhary

1
@AnandChoudhary cela fonctionne également dans jQuery, mais vous pouvez remplacer const file = document.querySelector ('. File'); avec const file = $ ('. file'); ou faites simplement $ ('. file'). val (""); pour le vider
Alireza

18

Particulièrement pour Angular

document.getElementById('uploadFile').value = "";

Cela fonctionnera, mais si vous utilisez Angular, il dira que "la propriété 'value' n'existe pas sur le type 'HTMLElement'.any"

document.getElementById () renvoie le type HTMLElement qui ne contient pas de propriété value. Donc, convertissez-le en HTMLInputElement

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

SUPPLÉMENTAIRE :-

Cependant, nous ne devons pas utiliser la manipulation DOM (document.xyz ()) en angulaire.

Pour ce faire, angulaire a fourni @VIewChild, @ViewChildren, etc. qui sont respectivement document.querySelector (), document.queryselectorAll ().

Même moi, je ne l'ai pas lu. Mieux vaut suivre les blogs d'experts

Traverser cette link1 , lien2


heureux de ne pas avoir à utiliser angulaire!
user2677034

Non. FIx serait là. Seulement, j'ai trouvé celui-ci. Lequel utilisez-vous alors?
P Satish Patro

Désolé, j'étais sarcastique ... J'utilise juste document.getElementById ('uploadFile'). Value = ""; car je n'utilise pas angulaire.
user2677034

Joli. J'ai pensé la même chose, mais utilisez Angular / React / VUe. Ce sont des cadres puissants pour le routage, les composants, le service, la mise en œuvre de la substitution de la manipulation de dom
P Satish Patro

14

J'utilise pour vuejs

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

this.$refs.fileref.value = ''

2
Merci mec! Je pensais que je ne trouverais jamais de solution avec vuejs: D, tu es folle ma journée!
Zsoca

1
A fonctionné comme un charme! Merci
F KIng

8

La réinitialisation du fichier d'entrée est très simple

$('input[type=file]').val(null);

Si vous liez réinitialisez le fichier dans changer un autre champ du formulaire, ou chargez le formulaire avec ajax.

Cet exemple est applicable

le sélecteur par exemple est $('input[type=text]')ou tout élément du formulaire

événement click , changeou tout événement

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

5

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

Il existe de nombreuses approches et je proposerai d'aller avec l'attachement ref à l'entrée.

<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 = "";


4

Avec angulaire, 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

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

modèle

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

démo stackblitz


2

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



2

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>


2

Ma meilleure solution

$(".file_uplaod_input").val('');  // this is working best ):

En quoi est-ce différent de la première réponse et des commentaires sur cette réponse?
Akin Okegbile

1

Solution jQuery:

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

Pensez à compléter cette réponse pour expliquer comment cela fonctionne.
Bugs

@Bugs suppose que cela parle de lui-même. Lorsque l' on changeévénement de l'entrée de fichier est déclenché, la valeur est effacée. Le type d'entrée est réinitialisé de aucun vers fichier.

2
@Jordy oui je sais ce que ça fait :) Je pensais juste qu'avec une douzaine d'autres réponses, cela valait la peine d'essayer de le faire ressortir. Il est apparu pendant que je passais en revue. Ils pourraient en fait copier votre commentaire pour le compléter un peu plus. Il vaut toujours la peine d'expliquer pourquoi vous pensez que le code résout le problème des OP.
Bugs

1

J'ai rencontré le problème avec ng2-file-upload pour angular. si vous cherchez la solution en angulaire référez-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 = '';`

};


1
<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function(){
$("p").click(function(){

            $("#mfile").val('');
            return false;

    });
});


Bien que ce code puisse résoudre la question, y compris une explication de comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre message, et entraînerait probablement plus de votes positifs. N'oubliez pas que vous répondrez à la question des lecteurs à l'avenir, pas seulement à la personne qui pose la question maintenant. Veuillez modifier votre réponse pour ajouter des explications et donner une indication des limitations et hypothèses applicables. De l'avis
double-bip

0

Si vous avez plusieurs fichiers dans votre formulaire mais que vous souhaitez uniquement réinitialiser l'un d'eux:

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

$("#"+idInput).filestyle('clear');

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

0

Fonctionne également 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

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.