javascript - cómo restablecer<tipo de entrada="archivo">

visual-studio-2012 winjs

Question

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

Quiero restablecer el contenido de mi archivo de entrada:

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

¿Cómo debo hacer eso?

Answer 1

SOLUCIÓN

El siguiente código me funcionó 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.

CAMPO DE GOLF

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

Answer 2

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

Hay algunas formas de hacerlo, pero la forma directa y sencilla que funciona bien en muchos navegadores es cambiar el valor de archivado a nada, de esa manera se restablece la carga de archivos archivados, también intente usar javascript puro en lugar de cualquier marco. código abajo, solo echa un vistazo (ES6):

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

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

Answer 3

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

Answer 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 puedes 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 de stackblitz

Answer 5

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

onClick="this.form.reset()"

Answer 6

Deberías probar esto:

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

Answer 7

El archivo de entrada de reinicio está en muy solo

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

Si se vincula, reinicie el archivo en otro campo del formulario o cargue el formulario con ajax.

Este ejemplo es aplicable

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

evento click , change , o cualquier evento

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

Answer 8

En caso de que tengas lo siguiente:

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

entonces solo haz

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

para restablecer el control de archivos.

Answer 9

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. No hay clon de entrada, no se restablece la forma!

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

Answer 10

Funciona para controles dinámicos también.

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

});

Answer 11

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

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

Answer 12

No puedes restablecer eso ya que es un archivo de solo lectura. Puedes clonarlo para solucionar el problema.

Answer 13

Para vaciar la entrada del archivo, simplemente haga esto:

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

Answer 14

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

Si usa boostrap, jquery, filestyle para mostrar el formulario de archivo de entrada:

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

Answer 15

Solo puede clonarlo y reemplazarlo con sí 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

Answer 16

Solo usa:

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

Answer 17

Yo uso para vuejs

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

this.$refs.fileref.value = ''''

Answer 18

solución jQuery:

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

Answer 19

Otra solución (sin seleccionar elementos HTML DOM)

Si agregó el detector de eventos ''cambiar'' 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.'');
  }

Answer 20

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

Answer 21

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>

Answer 22

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