HTML <input type='file'> Событие выбора файла

Скажем, у нас есть этот код:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

что приводит к следующему:

image showing browse and upload button

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

image showing a file search dialog box with a file selected

Пользователь выберет файл, дважды щелкнув файл или нажав кнопку "Открыть".

Есть ли событие Javascript, которое можно использовать для уведомления после выбора файла?

Ответ 1

Прослушать событие изменения.

input.onchange = function(e) { 
  ..
};

Ответ 2

Когда вам нужно перезагрузить файл, вы можете стереть значение ввода. В следующий раз, когда вы добавите файл, произойдет событие "on change".

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

Ответ 3

jQuery:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

Ответ 4

Событие изменения вызывается, даже если вы нажмете на отмену.