it-swarm.com.ru

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

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

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

153
dronus

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

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

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

Вот DEMO .

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

217
Brian Ustas
<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;

Вот СКРИПКА

17
elshnkhll

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

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

7
Xacur Aphrantus

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

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

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