Ограничение типов файлов в <input type="file"/>: руководство

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

Для того, чтобы <input type="file"/> принимал лишь определённые типы файлов, задайте атрибут accept.

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

Так вы позволите диалоговому окну выбора файлов отображать только файлы в форматах .jpg и .png.

Глубокое погружение в изучение атрибута accept

Атрибут accept для тега <input> функционирует как фильтр в диалоговом окне выбора файлов, подсказывая браузеру, какие типы файлов можно загружать. Несмотря на то, что он не обеспечивает полноценную валидацию, атрибут accept помогает пользователям правильно выбирать файлы нужных форматов.

Расширения файлов и MIME-типы

Атрибут accept поддерживает как конкретные расширения файлов, так и MIME-типы.

<input type="file" accept="image/*"/> <!-- Принимается любой тип изображений -->

<input type="file" accept=".png"/> <!-- Принимаются только файлы в формате png -->

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

Преимущества использования MIME-типов

Применение MIME-типов повышает совместимость с различными браузерами. MIME-тип включает type и subtype, разделённые слэшем (например, application/pdf), и это обычно более надёжно, чем просто расширения файлов (".pdf").

Принятие нескольких типов файлов

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

<!-- Позволяет выбирать файлы png и gif, а также все остальные изображения -->
<input type="file" accept=".png, .gif, image/*"/>

Влияние порядка типов

Порядок типов в атрибуте accept может повлиять на выбор файла по умолчанию: например, приоритет дается расширению файлов, если оно указано перед "image/*".

Учет MIME-типов для форматов Office

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

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

Различные браузеры могут по-разному воспринимать расширение файла: например, Firefox может не полностью распознать его. Поэтому важно не забывать о тестировании в различных браузерах для обеспечения стабильного и предсказуемого поведения.

Серверная валидация для надежности

Атрибут accept на стороне клиента можно обойти, поэтому для гарантированной валидации типов файлов следует реализовывать проверку также и на сервере.

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

<input type="file"/> действует как фильтр для типов файлов:

Пример настройки фильтра с атрибутом accept:

<!-- Настройка фильтра -->
<input type="file" accept=".jpg, .png, .pdf"/>

Такой фильтр пропустит только файлы с расширениями .jpg, .png и .pdf.

Настройка ваших фильтров типов файлов

Как найти MIME-тип

Чтобы выяснить MIME-тип для использования, обратитесь к реестру IANA Media Types. Ошибки в названии MIME-типов могут сбить с толку работу фильтра.

Разрешение выбора нескольких файлов

Добавьте атрибут multiple к тегу <input>, если хотите дать возможность пользователю выбирать несколько файлов одновременно.

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

Универсальный шаблон

Для того чтобы разрешить принятие файлов любого типа, используйте значение "/" в атрибуте accept, если нет необходимости в ограничении форматов.

Определение MIME-типа с помощью JavaScript

С помощью File API браузера можно определить MIME-тип файла для дополнительной проверки на клиенте, но не забывайте, что это не заменяет валидацию на серверной стороне.

document.getElementById('fileInput').onchange = function(e) {
  const file = e.target.files[0];
  const mimeType = file.type;
  // Проверяем, соответствует ли тип файла требованиям
};