Подія вибору файлу введення HTML не запускається при виборі одного файлу

Чи є можливість виявити кожен вибір файлу, який користувач здійснив для елемента inputтипу HTML file?

Про це запитували багато разів, але зазвичай запропонована onchangeподія не спрацьовує, якщо користувач знову вибере той самий файл.

Встановіть значення inputдля nullкожної onclickподії. Це скине значення input's і призведе до запуску onchangeподії, навіть якщо обраний той самий шлях.

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

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

Ось DEMO .

Примітка. Це нормально, якщо ваш файл має префікс "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>

Він додає слухача подій до "зміни", але я перевірив це, і він спрацьовує, навіть якщо ви вибрали той самий файл, а не, якщо ви скасуєте.

Використовуйте подію 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 = ''
}

Робіть все, що ви хочете зробити після успішного завантаження файлу. Просто після завершення обробки файлу встановіть значення керування файлом на порожній рядок. тому. наприклад, ти можеш зробити цю справу і працював на мене як на шарм

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