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

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?

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

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()"

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).

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.

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

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.');
  }

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.

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>

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

J'utilise pour vuejs

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

this.$refs.fileref.value = ''

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) ;
});

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"/>

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

Utilisez simplement:

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

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

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.

Vous devriez essayer ceci:

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

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>

Ma meilleure solution

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

Solution jQuery:

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

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 = '';`

};

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

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

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

    });
});

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');

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

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 !!');
        }
    });

});