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

— Місяць
джерело

5

Що за фанк старий інтерфейс Windows!

— Ель-

@ El-Burritos це було розміщено в 2010 році; звичайно, це старий інтерфейс Windows: D

— Саймон Чен

181

Прослухайте подію зміни.

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

— Анураг
джерело

3

ми напишемо його куди .. у тегах сценарію javascript

— Місяць,

5

так, у тегах сценарію, або ви можете додати його як атрибут ( <input type="file" onchange="..." />), хоча це не рекомендується.

— Анураг

7

Зауважте, що в IE7 та 8, що подія "зміни" не перетворюється на подію форми. Потрібно поставити слухача на тег <input>.

— xer0x

36

Що робити, якщо користувачеві потрібно "перезавантажити" файл? onchange не запустить, але він все одно повинен перезавантажуватися так, ніби він завантажував його вперше.

— bryc

11

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

— bob0the0mighty

45

Коли вам доведеться перезавантажити файл, ви можете стерти значення вводу. Наступного разу, коли ви додасте файл, стартує подія "на зміну".

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
});

— Занон
джерело

3

Подія Змінити називається, навіть якщо натиснути кнопку Скасувати.

— антоній
джерело

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
джерело