Фильтрация файлов в диалоге <input type="file"> в HTML

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

Чтобы ограничить выбор файлов определённым типом в input, используйте атрибут accept. Для разрешения загрузки только JPEG файлов, используйте следующий код:

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

Если нужно, чтобы пользователь мог выбрать PDF, Word и Excel, пропишите следующие типы файлов:

<input type="file" accept=".pdf, .docx, .xlsx">

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

Подробнее об атрибуте accept

Атрибут accept поддерживает не только указание конкретных расширений файлов, но и MIME типов, что создает возможность для более широкого выбора файлов:

<input type="file" accept="image/jpeg, application/pdf">

В данном случае выбор разрешен для JPEG изображений и PDF документов, которые определяются по MIME-типу, что улучшает возможности фильтрации и дает возможность комбинировать оба подхода в одном элементе.

Работа с поведением браузеров и валидацией на сервере

Важно учесть, что браузеры могут интерпретировать атрибут accept по-разному. Считайте клиентскую фильтрацию необходимым удобством, а не абсолютной защитой. Обязательно организовывайте проверку формата файлов также и на сервере, так как клиентские меры безопасности могут быть обойдены.

Усиление контроля с помощью JavaScript

Для более точной валидации используйте атрибут accept вместе с JavaScript:

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function (event) {
  const fileName = event.target.value;
  
  // "Ты не пройдёшь!" — если файл не в формате JPEG
  if (!fileName.endsWith('.jpg')) {
    alert('Пожалуйста, выберите изображение в формате JPEG.');
    return false;
  }
});

fileInput.accept = '.jpg'; // Динамическая установка предпочтительного формата
fileInput.click(); // Программное открытие диалога выбора файла

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

Улучшение UX с помощью обратной связи

Всегда информируйте пользователя, если он пытается загрузить файл недопустимого формата:

if (!fileName.endsWith('.jpg')) {
  alert('Неверный тип файла. Выберите, пожалуйста, изображение в формате JPEG.');
}

Не забывайте положительно подтверждать действия пользователя:

alert('Вы успешно выбрали изображение в формате JPEG! 🎉');

Стратегия

• Применяйте accept, избегая нестандартных атрибутов.
• Предпочитайте указание MIME типов перед расширениями, когда это возможно.
• Осуществляйте защиту как на фронтенде, так и на бэкенде, чтобы предотвратить нежелательные "сюрпризы".
• Несмотря на то, что accept фильтрует выбор в диалоговом окне, всегда проверяйте реальное содержимое файла, чтобы избежать ошибок.

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

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

🍝 Раздел магазина: [Спагетти, Макароны, Лингвини, Бумага, Пенне, Тетрадь]

Установка атрибута accept подобна вывеске "Только макароны":

<input type="file" accept=".doc,.docx" />

Тогда магазин будет выглядеть вот так:

🔍 Отфильтрованный Раздел: [Спагетти, Макароны, Лингвини, Пенне]

Таким образом, вывеска отсеивает товары, которые не являются макаронами (.doc файлы), предоставляя пользователю возможность выбирать только желанные продукты.

Подготовка защиты

Accept – это наш первый уровень защиты, позволяющий пользователю понять, какой тип файла стоит загрузить. Однако пользователи могут быть изобретательными: введя в поле с именем файла ".", можно показать все файлы, независимо от установленного фильтра. Это подчеркивает ограничения клиентской фильтрации.

Обработка события onchange в JavaScript создаёт второй уровень защиты, оповещающий пользователя, который пытается загрузить файл недопустимого типа.

Идём дальше

• Повышайте доступность, предоставляя подходящую обратную связь при каждом взаимодействии с пользователем.
• Соблюдайте принцип прогрессивного улучшения: начинайте с базового функционала HTML, затем добавляйте дополнительные функции с помощью CSS и JavaScript.
• Следите за обновлениями в браузерах, которые могут вносить изменения в функционал элементов ввода файлов и атрибута accept.

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

1. Атрибут accept в HTML input — руководство W3Schools по использованию атрибута accept.
2. Атрибут accept в HTML — подробное описание accept от MDN Web Docs.
3. html – Атрибут accept в input файлов – это полезно? – Stack Overflow — обсуждение эффективности атрибута accept на Stack Overflow.
4. HTML Стандарт – официальная спецификация WhatWG для атрибута accept и ввода файлов.
5. Учебник | DigitalOcean — гайд от DigitalOcean по работе с вводом файлов в HTML.
6. FileReader – Веб API | MDN — руководство MDN Web Docs по использованию API FileReader.