come ripristinare <input type = "file">

Sto sviluppando un'app metro con VS2012 e Javascript

Voglio ripristinare il contenuto del mio input di file:

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

Come dovrei farlo?

La soluzione jQuery che @ dhaval-marthak ha pubblicato nei commenti ovviamente funziona, ma se guardi la chiamata reale a jQuery è abbastanza facile vedere cosa sta facendo jQuery, semplicemente impostando l' valueattributo su una stringa vuota. Quindi in JavaScript "puro" sarebbe:

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

È necessario per avvolgere <input type = “file”>a <form>tag e quindi è possibile ripristinare ingresso resettando il modulo:

onClick="this.form.reset()"

Questa è la soluzione MIGLIORE:

input.value = ''

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

Di tutte le risposte qui questa è la soluzione più veloce. Nessun clone di input, nessun modulo ripristinato!

L'ho controllato in tutti i browser (ha persino il supporto IE8).

Nel caso in cui tu abbia:

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

quindi fai semplicemente:

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

per ripristinare il controllo del file.

Puoi semplicemente clonarlo e sostituirlo con se stesso, con tutti gli eventi ancora collegati:

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

e

var input = $("#control");

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

Grazie: Css-tricks.com

Un'altra soluzione (senza selezionare elementi DOM HTML)

Se hai aggiunto il listener di eventi 'change' su quell'input, allora nel codice javascript puoi chiamare (per alcune condizioni specificate):

event.target.value = '';

Ad esempio in HTML:

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

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

SOLUZIONE

Il seguente codice ha funzionato per me con jQuery. Funziona in ogni browser e consente di preservare eventi e proprietà personalizzate.

var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Vedi questo jsFiddle per il codice e la dimostrazione.

LINK

Vedere Come ripristinare l'input di file con JavaScript per ulteriori informazioni.

Il ripristino di un pulsante di caricamento file è così semplice utilizzando JavaScript puro !

Ci sono alcuni modi per farlo, ma il modo più semplice che funziona bene in molti browser sta cambiando il valore archiviato in nulla, in questo modo il caricamento archiviato viene ripristinato, inoltre provo a usare javascript puro piuttosto che qualsiasi framework, ho creato il codice qui sotto, basta dare un'occhiata (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}

<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

Soprattutto per Angolare

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

Funzionerà, ma se si utilizza Angular Dirà "Proprietà 'valore' non esiste sul tipo 'HTMLElement'.any"

document.getElementById () restituisce il tipo HTMLElement che non contiene una proprietà value. Quindi, esegui il cast in HTMLInputElement

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

EXTRA: -

Tuttavia, non dovremmo usare la manipolazione DOM (document.xyz ()) in angolare.

Per fare ciò angolare ha fornito @VIewChild, @ViewChildren, ecc. Che sono rispettivamente document.querySelector (), document.queryselectorAll ().

Anche io non l'ho letto. Meglio seguire i blog degli esperti

Passa attraverso questo link1 , link2

Uso per vuejs

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

this.$refs.fileref.value = ''

Il file di input di reimpostazione è su single

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

Se si esegue il binding, ripristinare il file in un altro campo del modulo o caricarlo con ajax.

Questo esempio è applicabile

selettore per esempio è $('input[type=text]')o qualsiasi elemento del modulo

eventi click , changeo qualsiasi evento

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

Con IE 10 ho risolto il problema con:

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

dove :

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

Ci sono molti approcci e suggerirò di andare con ref allegato all'input.

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

per cancellare il valore dopo l'invio.

this.fileInput.value = "";

Usa solo:

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

Con angolare è possibile creare una variabile modello e impostare il valore su null

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

Oppure puoi creare un metodo per reimpostare in questo modo

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

modello

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

demo di Stackblitz

Non è possibile ripristinarlo poiché si tratta di un file di sola lettura. puoi clonarlo per risolvere il problema.

Dovresti provare questo:

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

Questo potrebbe essere fatto in questo modo

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>

La mia migliore soluzione

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

soluzione jQuery:

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

Ho affrontato il problema con ng2-file-upload per angolare. se stai cercando la soluzione in angolare fai riferimento al codice seguente

HTML:

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

componente

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;

    });
});

Se nel tuo modulo sono presenti più file ma desideri ripristinarne solo uno:

se usi boostrap, jquery, filestyle per visualizzare il modulo del file di input:

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

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

Funziona anche con controlli dinamici.

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

});