O evento de seleção de arquivo de entrada HTML não é acionado ao selecionar o mesmo arquivo

Existe alguma chance de detectar cada seleção de arquivo que o usuário fez para um HTML inputdo fileelemento type ?

Isso foi solicitado várias vezes antes, mas o onchangeevento geralmente proposto não é acionado se o usuário selecionar o mesmo arquivo novamente.

Defina o valor de inputpara nullem cada onclickevento. Isso redefinirá o inputvalor do e disparará o onchangeevento, mesmo que o mesmo caminho esteja selecionado.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

Aqui está uma demonstração .

Nota: É normal se o seu arquivo tiver o prefixo 'C: \ fakepath \'. Esse é um recurso de segurança que impede o JavaScript de conhecer o caminho absoluto do arquivo. O navegador ainda o conhece internamente.

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; só é necessário para o Chrome, o Firefox funcionará bem apenas com return false;

Aqui está um FIDDLE

Neste artigo, sob o título "Usando entrada de formulário para selecionar"

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

Ele adiciona um ouvinte de evento a 'alteração', mas eu o testei e é acionado mesmo se você escolher o mesmo arquivo e não se você cancelar.

Use o evento onClick para limpar o valor da entrada de destino, sempre que o usuário clicar no campo. Isso garante que o evento onChange seja acionado para o mesmo arquivo também. Trabalhou para mim :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

Usando TypeScript

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Faça o que você quiser depois que o arquivo for carregado com êxito. Logo após a conclusão do processamento do arquivo, defina o valor do controle de arquivo como string em branco. como por exemplo, você pode fazer isso e trabalhou para mim como charme

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Limpar o valor do 0º índice de entrada funcionou para mim . Por favor, tente o código abaixo, espero que funcione (AngularJs).

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };