cómo restablecer <input type = "file">

Estoy desarrollando una aplicación de metro con VS2012 y Javascript

Quiero restablecer el contenido de mi entrada de archivo:

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

¿Cómo debo hacer eso?

La solución jQuery que @ dhaval-marthak publicó en los comentarios obviamente funciona, pero si observa la llamada real de jQuery, es bastante fácil ver qué está haciendo jQuery, simplemente estableciendo el valueatributo en una cadena vacía. Entonces, en JavaScript "puro" sería:

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

Debe ajustarse <input type = “file”>a las <form>etiquetas y luego puede restablecer la entrada restableciendo su formulario:

onClick="this.form.reset()"

Esta es la mejor solución:

input.value = ''

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

De todas las respuestas aquí, esta es la solución más rápida. Sin clon de entrada, sin reinicio de formulario.

Lo revisé en todos los navegadores (incluso tiene soporte para IE8).

En caso de que tenga lo siguiente:

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

entonces solo haz:

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

para restablecer el control de archivo.

Simplemente puede clonarlo y reemplazarlo consigo mismo, con todos los eventos aún adjuntos:

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

y

var input = $("#control");

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

Gracias: css-tricks.com

Otra solución (sin seleccionar elementos HTML DOM)

Si agregó el detector de eventos 'change' en esa entrada, entonces en el código javascript puede llamar (para algunas condiciones específicas):

event.target.value = '';

Por ejemplo en HTML:

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

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

SOLUCIÓN

El siguiente código funcionó para mí con jQuery. Funciona en todos los navegadores y permite preservar eventos y propiedades personalizadas.

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

MANIFESTACIÓN

Vea este jsFiddle para el código y la demostración.

ENLACES

Consulte Cómo restablecer la entrada de archivos con JavaScript para obtener más información.

¡Restablecer un botón de carga de archivos es muy fácil usando JavaScript puro !

Hay pocas formas de hacerlo, pero la forma más sencilla que funciona bien en muchos navegadores es cambiar el valor archivado a nada, de esa manera la carga archivada se restablece, también trato de usar JavaScript puro en lugar de cualquier marco, creé el código a continuación, solo échale un vistazo (ES6):

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

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

Particularmente para angular

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

Funcionará, pero si usa Angular, dirá "Propiedad 'valor' no existe en el tipo 'HTMLElement'.any"

document.getElementById () devuelve el tipo HTMLElement que no contiene una propiedad de valor. Entonces, envíalo a HTMLInputElement

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

EXTRA: -

Sin embargo, no debemos usar la manipulación DOM (document.xyz ()) en angular.

Para hacer eso, angular ha proporcionado @VIewChild, @ViewChildren, etc., que son document.querySelector (), document.queryselectorAll () respectivamente.

Incluso yo no lo he leído. Es mejor seguir los blogs de expertos

Ir a través de este enlace1 , enlace2

Yo uso para vuejs

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

this.$refs.fileref.value = ''

El archivo de entrada de restablecimiento está en un solo

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

Si vincula restablecer el archivo en cambio otro campo del formulario, o cargar el formulario con ajax.

Este ejemplo es aplicable

selector por ejemplo es $('input[type=text]')o cualquier elemento del formulario

evento click , changeo cualquier evento

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

Con IE 10 resolví el problema con:

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

dónde :

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

Hay muchos enfoques y sugeriré ir con el archivo adjunto ref a la entrada.

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

para borrar el valor después de enviar.

this.fileInput.value = "";

Solo usa:

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

Con angular puede crear una variable de plantilla y establecer el valor en null

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

O puede crear un método para restablecer así

componente.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

modelo

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

demo stackblitz

No puede restablecerlo ya que es un archivo de solo lectura. puede clonarlo para solucionar el problema.

Deberías probar esto:

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

Esto podría hacerse así

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>

Mi mejor solucion

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

Solución jQuery:

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

Me enfrenté al problema con ng2-file-upload para angular. si está buscando la solución en angular, consulte el siguiente código

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;

    });
});

Si tiene varios archivos en su formulario pero solo desea que se restablezca uno de ellos:

si usa boostrap, jquery, filestyle para mostrar la forma del archivo de entrada:

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

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

Funciona también para controles dinámicos.

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

});