Como remover ou limpar valor do input file? – javascript arquivo

Pergunta:


Oi pessoal do stackoverflow.

É possível remover ou limpar valor do input file ?

Também vi outro exemplo de resetar ou remover todos arquivos input file usando:

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

Qual é melhor maneira de limpar input file ?

Alguma idéia brilhante ?

Autor da pergunta Matheus Miranda

Resposta Daniel Omine:

Exemplo de como limpar o valor de um input type=file (na verdade é um truque):

$().ready(function() {
	list = $("[class^=f_clear_]");
	if (list.length > 0) {
		$.each (list, function(key, row) {
			var arr = row.className.split("_");
			var selector = "#f"+arr[2];
			$(this).click(function(){
				GenericInputFileCleaner(selector);
			});
		});
	}
});

function GenericInputFileCleaner(selector){
	var clone = $(selector).clone(true);
	clone.insertAfter(selector);
	$(selector).remove();
	clone.attr("id", selector.substring(1));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form action="tmp.php" method="post" enctype="multipart/form-data">
<input type="button" value="x" class="f_clear_1"> <input name="f[]" type="file" id="f1"><br>
<input type="button" value="x" class="f_clear_2"> <input name="f[]" type="file" id="f2"><br>
<input type="button" value="x" class="f_clear_3"> <input name="f[]" type="file" id="f3"><br>
<input type="submit" value="send">
</form>
</body>
</html>

A lógica aqui é clonar o elemento que deseja limpar, adicionar o clone logo na frente e remover original em seguida. Assim, o clone apresentará o atributo value vazio. No final, o clone recebe o mesmo ID do original. Mas isso deve ser feito após o original ter sido removido.

Isso é um meio mais simples e seguro do que tentar setar o atributo value:

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

ou Jquery

$("#seu_id_do_input").val("");

Ambos deveriam funcionar bem, mas dependendo do browser e versão, podem não funcionar. O motivo todos já devem saber que é evitar manipular o atributo value com dados maliciosos. Porém, não há problema algum em apagar o atributo e todos os browsers poderiam liberar isso. Mas alguns browsers, talvez por bug ou falta de implementação, não permitem modificar nada, mesmo apagar o valor.

Por isso, uma opção mais segura é clonar, adicionar o clone no corpo HTML e remover o original.

Preferi fazer com JQuery por ser mais prático. O código ficaria maior e mais suscetível a erros de compatibilidade se tentasse inventar algo sem o auxílio do framework.

Achei desnecessário comentar o código e explicar em detalhes porque é bem pequeno, legível, fácil de entender. A parte que interessa é a função GenericInputFileCleaner(). O restante é meramente didático. Adapte conforme o seu caso.

A desvantagem é que obviamente perderá quaisquer eventos ligados a esse elemento ou que dependam do mesmo (onclick, por exemplo). Mas pode ser “facilmente” resolvido recriando tais eventos caso existam.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *