Zdarzenie wyboru pliku wejściowego HTML nie jest uruchamiane po wybraniu tego samego pliku

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

To było pytane wiele razy wcześniej, ale zwykle proponowane Zdarzenie onchange nie zostanie wywołane, jeśli użytkownik ponownie wybierze ten sam plik.

Author: Ravindranath Akila, 2012-08-20

4 answers

Ustaw wartość input na null dla każdego zdarzenia onclick. Spowoduje to zresetowanie wartości input i wywołanie zdarzenia onchange, nawet jeśli wybrana jest ta sama ścieżka.

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

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

Oto DEMO.

Uwaga: to normalne, jeśli plik jest poprzedzony 'C:\fakepath\'. Jest to funkcja zabezpieczająca uniemożliwiająca JavaScript poznanie ścieżki bezwzględnej pliku. Przeglądarka nadal wie o tym wewnętrznie.

 206
Author: Brian Ustas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-24 15:43:36
<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 niezbędny tylko dla Chrome, Firefox będzie działał dobrze tylko z return false;

Oto

 17
Author: elshnkhll,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-22 14:06:06

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 'change' , ale Przetestowałem go i uruchamia się nawet jeśli wybierzesz ten sam plik, a nie jeśli anulujesz.

 5
Author: Xacur Aphrantus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-24 14:19:27

Rób co chcesz po pomyślnym załadowaniu pliku.tuż po zakończeniu przetwarzania pliku ustaw wartość kontrolki pliku na pustą string.so the .change () będzie zawsze wywoływana, nawet jeśli nazwa pliku się zmieni. jak na przykład możesz to zrobić i pracował 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.
    });
 0
Author: Mohit Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-07 13:04:33