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

Есть ли шанс обнаружить каждый выбор файла, который пользователь сделал для HTML- элемента inputтипа file?

Это задавалось много раз, но обычно предлагаемое onchangeсобытие не срабатывает, если пользователь снова выбирает тот же файл.

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

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

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

Вот ДЕМО .

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

<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;

Вот скрипка

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

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», но я протестировал его, и он срабатывает, даже если вы выбираете тот же файл, а не если вы отменяете.

Используйте событие 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 = ''
}

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

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

Очистка значения 0-го индекса ввода работала для меня . Пожалуйста, попробуйте следующий код, надеюсь, это будет работать (AngularJs).

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