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

144

Допустим, у нас есть этот код:

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

что приводит к этому:

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

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

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

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

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

javascript html javascript-events Луна
источник
6
Какой веселый старый интерфейс Windows!
Эль-Буррито
@ El-Burritos это было опубликовано в 2010 году; конечно, это старый интерфейс Windows: D
Саймон Ченг

Ответы:

181

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

input.onchange = function(e) { 
  ..
};
Анураг
источник
3
мы напишем это где .. в тегах сценариев JavaScript
Moon
5
Да, в тегах сценария, или вы можете добавить его в качестве атрибута ( <input type="file" onchange="..." />), хотя это не рекомендуется.
Анураг
7
Обратите внимание, что в IE7 и 8 событие 'change' не всплывает до события формы. Вы должны поместить слушателя в тег <input>.
xer0x
36
Что делать, если пользователю необходимо «перезагрузить» файл? onchange не сработает, но все равно должен перезагрузиться, как если бы он загружал его впервые.
БРИКа
11
Обратите внимание, что это не работает, если пользователь выбирает один и тот же файл несколько раз подряд, поскольку файл не изменился.
bob0the0mighty
46

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

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Клем
источник
5
Это прекрасно работает, но имейте в виду странное поведение IE <11. Он не позволяет вам изменять значение ввода, поэтому скорее всего вам потребуется обходной путь. stackoverflow.com/questions/9011644/…
Александр Ткаленко
15

JQuery способ:

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

    // your code
});
Zanon
источник
4

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

Энтони
источник
2
было бы полезно, если бы вы предоставили некоторый код для объяснения своего ответа, поскольку в фрагменте кода Вопросы не упоминается событие изменения
DevDig
Я думаю, что @anthony имеет в виду следующий сценарий: выберите файл. Теперь снова откройте селектор файлов, но на этот раз нажмите «Отмена». Поскольку ни один файл не был выбран во второй раз, элемент управления вводом файла сбрасывается, тем самым изменяя свой первоначальный выбор, и происходит событие изменения.
dvlsc
Я попробовал это на Chrome 83, и событие не запускается, когда я нажимаю кнопку Отмена. Этот ответ довольно старый, и я думаю, что он должен быть исправлен, по крайней мере, в Chrome.
Саид Ахадиан
3

Вот как я это сделал с чистым 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;
}
<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>
Развернуть фрагмент

RegarBoy
источник