como redefinir <input type = "file">


401

Estou desenvolvendo um aplicativo de metrô com VS2012 e Javascript

Quero redefinir o conteúdo da minha entrada de arquivo:

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

Como devo fazer isso?


11
O que você quer dizer com conteúdo?
Maess

3
quer dizer, depois que o usuário seleciona um arquivo, você deseja redefinir o arquivo selecionado para "nada"?
ddavison


14
ele parece que uma simples inputElement.value = ""faz o truque muito bem sem recorrer à clonagem ou embalagem como sugerido. Trabalha em CH (46), IE (11) e FF (41)
Robert Koritnik

Respostas:


372

A solução jQuery que o @ dhaval-marthak postou nos comentários obviamente funciona, mas se você observar a chamada real do jQuery, é muito fácil ver o que o jQuery está fazendo, basta definir o valueatributo como uma string vazia. Assim, em JavaScript "puro", seria:

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

15
Obrigado! Se você já possui a referência de jquery, $ input.val ("") funcionará normalmente.
Natan

@ 2ndGAB Hmm ... só tenho 45.0.1, então não posso testar ... mais alguém?
Jordan Kasper

@ 2ndGAB Correção, meu Firefox acabou de atualizar para 46.0.1 e esse código ainda funciona lá. Você pode confirmar?
Jordan Kasper

@jakerella isso é estranho, para mim, defina um valor de seletor de arquivo de entrada para uma exceção de segurança. A única solução que com sucesso uso é$(#myfileselector).trigger('fileselect', [1, ""]);
fralbo

3
input.type = ''; input.type = 'arquivo'; // enjoy
Maxmaxmaximus 02/02

81

Você precisa envolver <input type = “file”>-se para <form>tags e, em seguida, você pode redefinir a entrada redefinindo seu formulário:

onClick="this.form.reset()"

7
Este é o método correto. Ele funciona em todos os navegadores e não entra em conflito com as proteções que os navegadores implementam para impedir que scripts maliciosos mexam com o valor .valor da entrada do arquivo.
Eugene Ryabtsev 21/03

9
Meio legal, não para mim, porque também redefine outros campos neste formulário.
Starwave

2
Uma solução jQuery semelhante poderia ser $("form").get(0).reset();. O .get(0)retornará o elemento de formulário real para que você possa usar a reset()função
Teewuane

74

Essa é a melhor solução:

input.value = ''

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

De todas as respostas aqui, esta é a solução mais rápida. Sem clone de entrada, sem redefinição de formulário!

Eu verifiquei em todos os navegadores (ele ainda tem suporte ao IE8).


4
Existe algum motivo específico para redefinir o input.typetambém? Definir apenas o valor para ''está dando o resultado esperado.
Harshita Sethi 3/03

Dispara onchangeevento no MS Edge?
Hotohoto # 28/17

@hotohoto eu não sei, tenho um Mac OS) #
Maxmaxmaximus 30/17/17 /

11
Isso precisa de mais votos positivos ou algo assim, demorei muito para encontrar essa resposta, este é o único que encontrei que funciona no IE.
sch

input.value = '' lança uma exceção para o console no IE11. No entanto, redefinir o input.type funciona em todos os navegadores sem nenhum erro.
Miroslav Jasso

45

Caso você tenha o seguinte:

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

então faça:

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

para redefinir o controle de arquivo.


6
Melhor solução IMHO.
Serhii Maksymchuk 17/03/19

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

44

Você pode cloná-lo e substituí-lo por si mesmo, com todos os eventos ainda anexados:

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

e

var input = $("#control");

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

Obrigado: Css-tricks.com


11
Infelizmente, isso não redefine o valor de entrada, consulte este jsFiddle . Para uma solução melhor, veja esta resposta .
Gyrocode.com

11
@ Gyrocode.com Este jsFiddle não funciona se a imagem for carregada pela segunda vez após a redefinição.
Sarthak Singhal

2
@SarthakSinghal, Infelizmente você escreveu o código errado, você deveria ter feito jsfiddle.net/cL1LooLe
Roger Russel

2
@RogerRussel: Exatamente ... eu estava me perguntando como as respostas superiores estavam dizendo que isso só funciona uma vez, o que é um indicador claro de que algum tipo de referência está sendo perdido. E esse foi realmente o caso, porque o primeiro criou a referência de entrada que mais tarde foi substituída por um novo elemento de entrada.
Robert Koritnik 23/10/2015

11
Apenas redefinir o valuemesmo em outras respostas parece muito mais direto do que manipular o DOM.
CodeFinity 26/05/19

40

Outra solução (sem selecionar elementos HTML DOM)

Se você adicionou o ouvinte de evento 'change' a essa entrada, no código javascript você pode chamar (para algumas condições especificadas):

event.target.value = '';

Por exemplo, em HTML:

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

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

Outra maneira de angular2: stackoverflow.com/questions/40165271/…
Belter

Isso funcionará apenas em nomes de arquivos que contêm apenas um .na frente da extensão do arquivo.
precisa

É isso mesmo, editei o código e forneci uma abordagem mais universal para obter uma extensão de arquivo.
indreed

31

SOLUÇÃO

O código a seguir funcionou para mim com o jQuery. Ele funciona em todos os navegadores e permite preservar eventos e propriedades personalizadas.

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

DEMO

Veja este jsFiddle para código e demonstração.

LINKS

Consulte Como redefinir a entrada de arquivo com JavaScript para obter mais informações.


11
@alessadro, não, apenas elemento <input type="file">com ID específico.
Gyrocode.com 2/17/17

Obrigado, esclareça sua resposta :) +1
candlejack

11
Esta é a solução mais limpa e compatível com o navegador que eu já encontrei - obrigado.
Pat

25

Redefinir um botão de upload de arquivo é tão fácil usando JavaScript puro !

Existem poucas maneiras de fazer isso, mas a maneira simples e direta, que está funcionando bem em muitos navegadores, está alterando o valor arquivado para nada. Dessa forma, o upload arquivado é redefinido. Também tente usar javascript puro em vez de qualquer estrutura. Criei o código abaixo, basta conferir (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}
<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>


como fazer com jQuery
Anand Choudhary

11
@AnandChoudhary também funciona dentro do jQuery, mas você pode substituir const file = document.querySelector ('. File'); com arquivo const = $ ('. file'); ou apenas faça $ ('. file'). val (""); esvaziá-lo
Alireza

18

Particularmente para Angular

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

Funcionará, mas se você usar Angular, ele dirá "O valor da propriedade 'não existe no tipo' HTMLElement'.any"

document.getElementById () retorna o tipo HTMLElement que não contém uma propriedade value. Então, coloque-o em HTMLInputElement

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

EXTRA: -

No entanto, não devemos usar a manipulação do DOM (document.xyz ()) em angular.

Para fazer isso, o angular forneceu @VIewChild, @ViewChildren, etc., que são document.querySelector (), document.queryselectorAll (), respectivamente.

Até eu não li. Melhor seguir os blogs de especialistas

Passe por este link1 , link2


feliz por não precisar usar angular!
user2677034

Não. O FIx estaria lá. Só eu encontrei este. Qual você está usando então?
P Satish Patro

Desculpe, eu estava sendo sarcástico ... Acabei de usar document.getElementById ('uploadFile'). Value = ""; como eu não uso angular.
user2677034

Agradável. Eu pensei o mesmo, mas use Angular / React / VUe. Estas são estruturas poderosas para o encaminhamento, componente, serviço, os dom implemenration manipulação substituição
P Satish Patro

14

Eu uso para vuejs

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

this.$refs.fileref.value = ''

2
Valeu cara! Eu pensei que nunca iria encontrar uma solução com vuejs: D, você está louco meu dia!
Zsoca 16/03/19

11
Trabalhou como um encanto! Obrigado
F KIng

8

O arquivo de entrada de redefinição está em um único

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

Se você ligar, redefina o arquivo em outro campo do formulário ou carregue o formulário com ajax.

Este exemplo é aplicável

seletor, por exemplo, é $('input[type=text]')ou qualquer elemento do formulário

evento click , changeou qualquer evento

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

5

Com o IE 10 , resolvi o problema com:

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

Onde :

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


5

Existem muitas abordagens e vou sugerir que você vá com o anexo ref à entrada.

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

para limpar o valor após o envio.

this.fileInput.value = "";


4

Com angular, você pode criar uma variável de modelo e definir o valor como null

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

Ou você pode criar um método para redefinir assim

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

Você não pode redefinir isso, pois é um arquivo somente leitura. você pode cloná-lo para solucionar o problema.



2

Isso poderia ser feito assim

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

Minha melhor solução

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

Como isso é diferente da primeira resposta e dos comentários sobre essa resposta?
Akin Okegbile

1

solução jQuery:

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

Considere preencher esta resposta para explicar como funciona.
Erros

@ Bug acho que isso fala por si. Quando o on changeevento da entrada do arquivo é acionado, o valor é limpo. O tipo de entrada é redefinido de nenhum para o arquivo.

2
@ Jordy sim, eu sei o que faz :) Eu só estava pensando que com uma dúzia de outras respostas, valeria a pena tentar fazê-lo se destacar. Apareceu enquanto eu estava revisando. Na verdade, eles poderiam copiar seu comentário para preenchê-lo um pouco mais. Sempre vale a pena tentar explicar por que você acha que o código corrige o problema dos OPs.
Bugs

1

Eu enfrentei o problema com o ng2-file-upload para angular. Se você está procurando a solução em angular, consulte o código abaixo

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;

    });
});


Embora esse código possa resolver a questão, incluir uma explicação de como e por que isso resolve o problema realmente ajudaria a melhorar a qualidade da sua postagem e provavelmente resultaria em mais votos positivos. Lembre-se de que você está respondendo à pergunta dos leitores no futuro, não apenas à pessoa que está perguntando agora. Por favor edite sua resposta para adicionar explicações e dar uma indicação do que limitações e premissas se aplicam. Da avaliação
double-beep

0

Se você possui vários arquivos em seu formulário, mas deseja apenas que um deles seja redefinido:

se você usar boostrap, jquery, filestyle para exibir o formulário do arquivo de entrada:

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

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

0

Também funciona 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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.