HTML Событие выбора файла

Предположим, у нас есть этот код:


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

изображение, показывающее кнопку просмотра и выгрузки

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

изображение, показывающее диалоговое окно поиска файлов с выбранным файлом

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

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

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

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

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

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

jQuery:

 $('input[name=myInputName]').change(function(ev) { // your code }); 

Так я сделал это с чистым JS:

 var files = document.getElementById('filePoster'); var submit = document.getElementById('submitFiles'); var warning = document.getElementById('warning'); files.addEventListener("change", function () { if (files.files.length > 10) { submit.disabled = true; warning.classList += "warn" return; } submit.disabled = false; }); 
 #warning { text-align: center; } #warning.warn { color: red; transform: scale(1.5); transition: 1s all; } 
 

Please do not upload more than 10 images at once.

Событие изменения вызывается, даже если вы нажмете кнопку «Отменить».