Ограничение выбора файлов в HTML: атрибут 'multiple'

Быстрый ответ

Чтобы задать ограничение на количество файлов (допустим, до трёх), доступных для множественного выбора, нужно воспользоваться JavaScript. Отслеживайте событие change на элементе input, подсчитайте количество выбранных файлов и, если их число превышает установленный лимит, очистите форму ввода.

// Задаём лимит на количество файлов
const maxFiles = 3;

// Отслеживаем изменения в форме ввода
document.querySelector('#multiFile').addEventListener('change', function() {
  // Если выбрано файлов больше, чем установлено в лимите, очищаем форму и выводим сообщение
  if (this.files.length > maxFiles) {
    this.value = '';
    alert(`Вы превысили лимит выбора файлов: можно выбрать не более ${maxFiles} файлов.`);
  }
});

<input type="file" id="multiFile" multiple>

Улучшение взаимодействия с пользователем

Чтобы сделать интерфейс более дружественным для пользователя, предлагается отключать кнопку отправки формы, если число выбранных файлов превышает установленное ограничение. Для этого можно изменить свойство кнопки с помощью jQuery.

// Мониторим изменения в форме ввода файлов
$('#multiFile').on('change', function() {
  let fileCount = this.files.length;
  // Активность кнопки зависит от количества выбранных файлов
  $('#uploadBtn').prop('disabled', fileCount > maxFiles);

  if (fileCount > maxFiles) {
    this.value = '';
    alert(`Было выбрано слишком много файлов. Допустимое количество: ${maxFiles}.`);
  }
});

<input type="file" id="multiFile" multiple>
<button id="uploadBtn">Отправить</button>

Не забывайте о важности серверной валидации для защиты от обхода клиентских ограничений.

Визуализация

Представляем ситуацию, в которой мы находимся в магазине со сладостями, где важно следовать ограничению на количество конфет:

Вы (🤲): "Я возьму все конфеты!"
Правила магазина (📜): "Минуточку, можно брать только 3!"

Таким образом, мы поступаем и с выбором файлов:

<input type="file" multiple onchange="if(this.files.length > 3) { alert('Слишком много файлов! Допустимо – до 3-х.'); this.value='';}">

Визуальная метафора:

До: 🍬🍭🍫🍬🍭🍫🍬🍭🍫 – (Наберу конфет до отказа!)
После: 🍬🍭🍫 – (Три конфеты – именно то, что нужно)

Это ограничение можно установить прямо в коде HTML.

Продвинутая настройка

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

Улучшение оповещений и сброс выбора файлов

Доработайте обработчик событий onChange, чтобы сделать интерфейс более дружественным.

Подробнее об этом расскажет наш спикер на видео

Ограничение по типу файла

Чтобы указать допустимые форматы файлов, используйте атрибут accept:

<input type="file" multiple accept=".png,.jpg,.jpeg">

Тестирование в разных браузерах

Проверьте, как ваше решение работает в различных браузерах, чтобы сделать его поведение универсальным.

Троттлинг и производительность

При работе с большим количеством файлов пригодится троттлинг или использование веб-воркеров. Это поможет предотвратить замедление интерфейса.

Такая настройка элемента выбора файлов обеспечит надёжность работы с ограничениями.

Полезные материалы

1. HTMLElement: событие change – Веб API | MDN — Подробности о событии change от MDN.
2. HTML input multiple Attribute — Подробный разбор атрибута multiple на сайте W3Schools.
3. Стандарт HTML — Глубокое исследование спецификации HTML в части input file.
4. Введение в браузерные события — Основы работы с событиями JavaScript в браузере.
5. Чтение файлов в JavaScript | web.dev — Статья посвящена чтению файлов с помощью JavaScript.
6. .prop() | jQuery API Documentation — Описание использования метода .prop() в jQuery.