Evento di selezione del file di input HTML non attivato quando si seleziona lo stesso file

C'è qualche possibilità di rilevare ogni selezione di file effettuata dall'utente per un HTML inputdi tipo fileelemento?

Questo è stato chiesto molte volte prima, ma l' onchangeevento solitamente proposto non si attiva se l'utente seleziona nuovamente lo stesso file.

Impostare il valore di inputsu nullsu ciascun onclickevento. Ciò ripristinerà il inputvalore e attiverà l' onchangeevento anche se è selezionato lo stesso percorso.

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

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

Ecco una DEMO .

Nota: è normale se il tuo file ha il prefisso 'C: \ fakepath \'. Questa è una funzione di sicurezza che impedisce a JavaScript di conoscere il percorso assoluto del file. Il browser lo sa ancora 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; è necessario solo per Chrome, Firefox funzionerà bene solo con return false;

Ecco un FIDDLE

In questo articolo, sotto il titolo "Utilizzo dell'input del modulo per la selezione"

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>

Aggiunge un listener di eventi a "modifica", ma l'ho provato e si innesca anche se si sceglie lo stesso file e non se si annulla.

Utilizzare l'evento onClick per cancellare il valore dell'input target, ogni volta che l'utente fa clic sul campo. Ciò garantisce che l'evento onChange verrà attivato anche per lo stesso file. Ha funzionato per me :)

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

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

Utilizzando TypeScript

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

Fai quello che vuoi fare dopo che il file è stato caricato correttamente. Solo dopo il completamento dell'elaborazione del file, imposta il valore del controllo del file su stringa vuota. Quindi .change () verrà sempre chiamato anche se il nome del file cambia o meno. come ad esempio puoi fare questa cosa e lavorare per me come per incanto

   $('#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 = ''
}

Cancellare il valore del 0 ° indice di input ha funzionato per me . Prova il codice seguente, spero che funzioni (AngularJs).

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