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


401

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?


1
¿Qué quieres decir con contenido?
Maess

3
¿quiere decir que, después de que el usuario selecciona un archivo, desea restablecer el archivo seleccionado a "nada"?
ddavison


14
que parece que un simple inputElement.value = ""hace el truco muy bien sin tener que recurrir a la clonación o la envoltura como se sugiere. Funciona en CH (46), IE (11) y FF (41)
Robert Koritnik el

Respuestas:


373

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

15
¡Gracias! Si ya tiene la referencia jquery de todos modos, $ input.val ("") funcionará como de costumbre.
Natan

@ 2ndGAB Hmm ... solo tengo 45.0.1, así que no puedo probar ... ¿alguien más?
Jordan Kasper

@ 2ndGAB Correction, My Firefox acaba de actualizar a 46.0.1 y este código todavía funciona allí. ¿Puedes confirmar?
Jordan Kasper

@jakerella eso es extraño, para mí, establecer un valor de selector de archivo de entrada desencadena una excepción de seguridad. La única solución que uso con éxito es$(#myfileselector).trigger('fileselect', [1, ""]);
fralbo

3
input.type = ''; input.type = 'archivo'; // disfruta
Maxmaxmaximus

81

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

onClick="this.form.reset()"

77
Este es el método correcto. Funciona en todos los navegadores y no entra en conflicto con ninguna protección que los navegadores implementen para evitar que las secuencias de comandos no autorizadas se alteren con el valor de entrada del archivo.
Eugene Ryabtsev

99
Un poco genial, no para mí, porque también restablece otros campos en este formulario.
Starwave

2
Una solución similar de jQuery podría ser $("form").get(0).reset();. El .get(0)devolverá el elemento de formulario real para que pueda usar la reset()función.
teewuane

74

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


44
¿Hay alguna razón específica para restablecer input.typetambién? Establecer solo el valor ''es dar el resultado esperado.
Harshita Sethi

¿Se dispara onchangeevento en MS Edge?
hotohoto

@hotohoto no lo sé, tengo un Mac
OS

1
Esto necesita más votos a favor o algo así, tomé demasiado tiempo para encontrar esta respuesta, este es el único que encontré que funciona en IE.
sch

input.value = '' arroja una excepción a la consola en IE11. Sin embargo, restablecer input.type funciona en todos los navegadores sin ningún error.
Miroslav Jasso

45

En caso de que tenga lo siguiente:

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

entonces solo haz:

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

para restablecer el control de archivo.


66
La mejor solución en mi humilde opinión.
Serhii Maksymchuk

3
O use DOM:inputFileEl.value = '';
Ninh Pham,

44

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


1
Desafortunadamente, esto no restablece el valor de entrada, vea este jsFiddle . Para una mejor solución, vea esta respuesta .
Gyrocode.com

1
@ Gyrocode.com Este jsFiddle no funciona si la imagen se carga por segunda vez después del reinicio.
Sarthak Singhal

2
@SarthakSinghal, desafortunadamente escribiste el código incorrecto, deberías haber hecho jsfiddle.net/cL1LooLe
Roger Russel

2
@RogerRussel: Exactamente ... Me preguntaba cómo es que las respuestas superiores decían que solo funciona una vez, lo que es un claro indicador de que se está perdiendo algún tipo de referencia. Y ese fue realmente el caso porque inicialmente creó la referencia de entrada que luego fue reemplazada por un nuevo elemento de entrada.
Robert Koritnik

1
Simplemente restablecer el me valuegusta en otras respuestas parece mucho más sencillo que manipular el DOM.
CodeFinity

40

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


Esto solo funcionará en nombres de archivo que contengan solo uno .delante de la extensión de archivo.
Ma Kobi

Así es, edité el código y proporcioné un enfoque más universal para obtener una extensión de archivo.
indreed

31

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.


1
@alessadro, no, solo elemento <input type="file">con ID específico.
Gyrocode.com

Gracias aclara tu respuesta :) +1
candlejack

1
Esta es la solución más limpia y más compatible con el navegador que he encontrado hasta ahora, gracias.
Pat

25

¡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>


cómo hacer con jquery
Anand Choudhary

1
@AnandChoudhary esto también funciona dentro de jQuery, pero puede reemplazar const file = document.querySelector ('. File'); con archivo const = $ ('. archivo'); o simplemente haga $ ('. archivo'). val (""); vaciarlo
Alireza

18

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


me alegro de no tener que usar angular!
user2677034

No. FIx estaría allí. Solo encontré este. ¿Cuál estás usando entonces?
P Satish Patro

Lo siento, estaba siendo sarcástico ... Solo uso document.getElementById ('uploadFile'). Value = ""; como no uso angular
user2677034

Buena esa. Pensé lo mismo, pero, use Angular / React / VUe. Estos son marcos potentes para la implementación de anulación de enrutamiento, componente, servicio, manipulación de dom
P Satish Patro

14

Yo uso para vuejs

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

this.$refs.fileref.value = ''

2
¡Gracias hombre! Pensé que nunca encontraría una solución con vuejs: D, ¡estás loco mi día!
Zsoca

1
¡Trabajado como un encanto! Gracias
F KIng

8

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

5

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


5

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


4

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


2

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



2

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>


2

Mi mejor solucion

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

¿Cómo es esto diferente de la primera respuesta y los comentarios sobre esa respuesta?
Akin Okegbile

1

Solución jQuery:

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

Considere rellenar esta respuesta para explicar cómo funciona.
Errores

@Bugs supongo que esto habla por sí mismo. Cuando on changese activa el evento de entrada del archivo, el valor se borra. El tipo de entrada se restablece de none a file.

2
@Jordy, sí, sé lo que hace :) Estaba pensando que con una docena de otras respuestas valdría la pena intentar que se destaque. Apareció mientras estaba revisando. De hecho, podrían copiar su comentario para completarlo un poco más. Siempre vale la pena tratar de explicar por qué siente que el código soluciona el problema de los OP.
Errores

1

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

};


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

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

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

    });
});


Si bien este código puede resolver la pregunta, incluir una explicación de cómo y por qué esto resuelve el problema realmente ayudaría a mejorar la calidad de su publicación, y probablemente resultaría en más votos positivos. Recuerde que está respondiendo la pregunta para los lectores en el futuro, no solo la persona que pregunta ahora. Por favor, editar su respuesta para agregar explicaciones y dar una indicación de lo que se aplican limitaciones y supuestos. De la opinión
doble pitido

0

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

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

0

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

});

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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.