Evento de seleção de arquivo HTML <input type = 'file'>

143

Digamos que temos este código:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

o que resulta nisso:

imagem mostrando o botão de navegação e upload

Quando o usuário clica no botão 'Procurar ...', uma caixa de diálogo de pesquisa de arquivo é aberta:

imagem mostrando uma caixa de diálogo de pesquisa de arquivo com um arquivo selecionado

O usuário selecionará o arquivo clicando duas vezes no arquivo ou clicando no botão 'Abrir'.

Existe um evento Javascript que eu possa usar para ser notificado depois que o arquivo for selecionado?

javascript html javascript-events Lua
fonte
5
Que interface antiga e divertida para o Windows!
El-Burritos
@ El-Burritos isso foi publicado em 2010; é claro, é uma antiga interface de usuário do Windows: D
Simon Cheng

Respostas:

180

Ouça o evento de mudança.

input.onchange = function(e) { 
  ..
};
Anurag
fonte
3
vamos escrevê-lo onde .. em tags de script javascript
lua
5
yes em tags de script ou você pode adicioná-lo como um atributo ( <input type="file" onchange="..." />), embora isso não seja recomendado.
Anurag
7
Observe que, no IE7 e 8, o evento 'change' não muda para o evento do formulário. Você precisa colocar seu ouvinte na tag <input>.
Xer0x
36
E se um usuário precisar "recarregar" um arquivo? O onchange não será acionado, mas ainda deve ser recarregado como se estivesse carregando pela primeira vez.
Br9c
11
Observe que isso não funcionará se o usuário escolher o mesmo arquivo mais de uma vez em uma linha, pois o arquivo não foi alterado.
bob0the0mighty
45

Quando você precisar recarregar o arquivo, poderá apagar o valor da entrada. Da próxima vez que você adicionar um arquivo, o evento 'on change' será acionado.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Clem
fonte
5
Isso funciona bem, mas esteja ciente do comportamento estranho do IE <11. Ele não permite que você altere o valor da entrada; portanto, é provável que você precise de uma solução alternativa. stackoverflow.com/questions/9011644/…
Oleksandr Tkalenko,
15

maneira jQuery:

$('input[name=myInputName]').change(function(ev) {

    // your code
});
Zanon
fonte
3

O evento Change é chamado mesmo se você clicar em cancelar.

anthony
fonte
2
ajudaria se você fornecesse algum código para explicar sua resposta, já que não há nenhum evento de alteração mencionado no trecho de código de Perguntas
DevDig
Acho que @anthony está se referindo ao seguinte cenário: Selecione um arquivo. Agora abra o seletor de arquivos novamente, mas desta vez clique em Cancelar. Como nenhum arquivo foi selecionado na segunda vez, o controle de entrada do arquivo é redefinido, alterando sua seleção inicial e o evento de alteração é acionado.
dvlsc
Eu tentei no Chrome 83 e o evento não é acionado quando clico no botão Cancelar. Essa resposta é bem antiga e acho que deve ter sido corrigida, pelo menos no Chrome.
Saeed Ahadian
3

Foi assim que fiz com JS puro:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});
#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}
<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>
Expandir snippet

RegarBoy
fonte