Событие выбора входного файла HTML не срабатывает при выборе того же файла

Ответ 1

Задайте значение input - null для каждого события onclick. Это будет reset значение input и запускает событие onchange, даже если выбран тот же путь.

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

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

Здесь DEMO.

Примечание. Это нормально, если ваш файл имеет префикс 'C:\fakepath \'. Это функция безопасности, которая не позволяет JavaScript знать абсолютный путь к файлу. Браузер все еще знает это внутри.

Ответ 2

<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; необходим только для Chrome, Firefox будет нормально работать только с return false;

Вот FIDDLE

Ответ 3

В этой статье под заголовком "Использование ввода формы для выбора"

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>

Он добавляет прослушиватель событий в "change", но я протестировал его, и он срабатывает, даже если вы выбираете тот же файл, а не если вы отменяете.

Ответ 4

Используйте событие onClick для очистки значения целевого ввода, каждый раз, когда пользователь нажимает на поле. Это гарантирует, что событие onChange будет запущено и для того же файла. Работал для меня :)

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

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

Использование TypeScript

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

Ответ 5

Делайте все, что хотите, после успешной загрузки файла. Просто после завершения обработки файла установите значение для элемента управления файлом в пустую строку. Поэтому .change() всегда будет вызываться, даже если имя файла изменяется или нет. как, например, вы можете сделать это, и работал для меня как шарм

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