Zdarzenie wyboru pliku wejściowego HTML nie uruchamia się po wybraniu tego samego pliku

Czy jest szansa na wykrycie każdego wyboru pliku dokonanego przez użytkownika dla elementu HTML inputtypu file?

To było zadawane wiele razy wcześniej, ale zwykle proponowane onchangezdarzenie nie jest uruchamiane, jeśli użytkownik ponownie wybierze ten sam plik.

Ustaw wartość na inputdla nullkażdego onclickzdarzenia. Spowoduje to zresetowanie inputwartości i wyzwolenie onchangezdarzenia, nawet jeśli zostanie wybrana ta sama ścieżka.

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

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

Oto DEMO .

Uwaga: To normalne, jeśli plik ma przedrostek „C: \ fakepath \”. Jest to funkcja bezpieczeństwa uniemożliwiająca JavaScriptowi rozpoznanie bezwzględnej ścieżki pliku. Przeglądarka nadal wie o tym wewnętrznie.

<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; jest konieczne tylko w Chrome, Firefox będzie działał dobrze tylko z return false;

Oto FIDDLE

W tym artykule pod tytułem „Korzystanie z formularza do wyboru”

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>

Dodaje detektor zdarzeń do „zmiany”, ale przetestowałem go i uruchamia się, nawet jeśli wybierzesz ten sam plik, a nie, jeśli anulujesz.

Użyj zdarzenia onClick, aby wyczyścić wartość docelowego wejścia za każdym razem, gdy użytkownik kliknie pole. Dzięki temu zdarzenie onChange zostanie uruchomione również dla tego samego pliku. Pracował dla mnie :)

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

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

Korzystanie z TypeScript

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

Rób wszystko, co chcesz, po pomyślnym załadowaniu pliku. Tuż po zakończeniu przetwarzania pliku ustaw wartość kontroli pliku na pusty łańcuch. Więc .change () będzie zawsze wywoływane, nawet jeśli nazwa pliku się zmieni, czy nie. na przykład możesz to zrobić i pracowałeś dla mnie jak urok

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

Wyczyszczenie wartości 0 indeksu danych wejściowych działało dla mnie . Wypróbuj poniższy kod, mam nadzieję, że to zadziała (AngularJs).

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