Ограничение типов загружаемых файлов в HTML: только изображения

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

Если вам нужно ограничить выгрузку файлов исключительно изображениями, используйте атрибут accept в элементе <input type="file">. Присвойте ему значение image/* для разрешения всех типов графических файлов или укажите конкретные форматы, например, image/png, image/jpeg.

<!-- Здесь допустима загрузка только изображений! -->
<input type="file" accept="image/png, image/jpeg">

Примечание: Атрибут accept ограничивает выбор файлов только изображениями в диалоге загрузки файлов браузера.

Многоуровневая безопасность: Клиент и сервер

Нельзя полагаться исключительно на атрибут accept, так как клиентские ограничения легко обойти. Повысьте уровень безопасности, проверяя MIME-тип на стороне сервера после загрузки. Это позволит убедиться, что файлы действительно являются изображениями.

Мгновенная визуальная обратная связь с помощью API FileReader

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

// API FileReader – незаменимый инструмент для предпросмотра изображений.
let reader = new FileReader();

Загрузка нескольких изображений

Чтобы разрешить загрузку сразу нескольких изображений, используйте атрибут multiple вместе с accept:

<!-- Дайте возможность каждому изображению принять участие в вашем торжестве! -->
<input type="file" accept="image/*" multiple>

Соблюдение MIME-типа и ограничения размера файла

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

// Размер имеет значение! Это особенно важно при загрузке файлов.
if (file.size > allowedSize) { /* обработка исключения */ }

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

Работа атрибута accept схожа с функцией вышибалы в клубе:

Вход в клуб: 🚪
Вышибала (HTML Input): 🛑🧔‍♂️
Допущенные гости (Файлы): 🖼️🎨📸

<input type="file" accept="image/*">

Он пропускает только тех, кто "одет" как изображение:

До: [📄, 🖼️, 🎵, 📸, 📊]
После: [🖼️, 📸]

Таким образом, атрибут accept действует как дресс-код: допускаются только изображения! 🚫👔🚫👗

Вежливая обработка ошибок

Мирный пользовательский опыт включает в себя аккуратную обработку ошибок и ясную обратную связь при неправильном выборе файла. Например, можно сбросить поле ввода в случае ошибки.

// Выбран неправильный файл. Попробуем ещё раз.
input.value = "";

Дополнительная безопасность: Проверки на стороне сервера

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

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

1. <input type="file"> – HTML: HyperText Markup Language | MDN – Подробная информация об атрибуте 'accept' для элемента ввода файлов.
2. Чтение файлов в JavaScript | Статьи | web.dev – Руководство по работе с File API.
3. FileReader – Веб-API | MDN – Описание и примеры использования API FileReader.
4. Атрибут accept ввода HTML – Примеры использования атрибута 'accept'.
5. Перетаскивание файлов – Веб-API | MDN – Управление перетаскиванием файлов для загрузки.
6. Неограниченная загрузка файлов | OWASP Foundation – Сведения о безопасности загрузки файлов и лучших практиках.