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

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

Чтобы ограничить типы файлов, которые может принимать <input type="file">, используйте атрибут accept со значением image/* или с конкретными расширениями, например .png, .jpg. Это позволит разрешить выбор только определённых форматов изображений. Вот пример кода:

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

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

Основы применения элемента <input>

Фильтрация на стороне клиента: первый уровень защиты

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

<!-- Внимание! Проход разрешён только для изображений .png, .jpg и .jpeg! -->
<input type="file" accept=".png, .jpg, .jpeg">

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

"Только изображения" на вечеринке: использование символа подстановки image/*

Символ подстановки image/* разрешает загрузку файлов всех типов изображений, открывая двери ко всем графическим форматам.

<!-- Дверь открыта для всех типов изображений -->
<input type="file" accept="image/*">

Для тех, кто стремится к совершенству: улучшение загрузки с помощью JavaScript

JavaScript также может быть применён для дополнительной валидации на стороне клиента, что повышает уровень безопасности. Это подобно дополнительной проверке документов при входе в клуб.

Валидация на стороне сервера: ключевой аспект безопасности при загрузке файлов

Проверки на уровне сервера: надёжная валидация

Хотя фильтрация и JavaScript могут обеспечить определённый уровень защиты, настоящую безопасность гарантирует только валидация на стороне сервера. В PHP для глубокой проверки файлов можно использовать функции getimagesize() или finfo_file().

// PHP предпочитает проверить всё самостоятельно!
if(isset($_FILES['file']) && getimagesize($_FILES['file']['tmp_name'])) {
    // Обработка подтверждённого изображения
}

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

Представьте <input type="file"> как дверь (🚪) к файловой системе вашего ПК (📂):

Обычная дверь: 🚪<input type="file">
// Через эту дверь может пройти что угодно

Добавьте к этому фильтр (🔍) для изображений:

Дверь с фильтром для изображений: 🚪🔍<input type="file" accept="image/*">
// Теперь через неё могут пройти только VIP-гости (🖼️)!

Варьирующая поддержка браузеров и мобильных устройств

Знание аудитории: совместимость с браузерами

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

Поддержка мобильных устройств: приоритет мобильной среде

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

Проверка совместимости атрибута accept

Учтите, что атрибут accept поддерживается в Internet Explorer 10+, Chrome, Firefox, Safari 6+ и Opera 15+.

Серверные проверки: усиление защиты

Не забывайте закрыть потенциальные уязвимости с помощью надёжных серверных проверок. Используйте isset() в PHP для валидации данных перед их обработкой.

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

1. html – Как ограничить формат файла при использовании <input type="file">? – Stack Overflow — дискуссии сообщества о том, как ограничить типы файлов.
2. <input type="file"> – HTML: Язык разметки гипертекста | MDN — подробное руководство по использованию атрибута accept.
3. Атрибут accept для HTML input – W3Schools — учебное руководство об атрибуте accept.
4. HTML Standard – Элемент input — стандарт HTML для элемента input.
5. Полный список MIME-типов – FreeFormatter.com — справочник MIME-типов.
6. Пример на Codepen: Пользовательская кнопка загрузки файлов — интерактивный пример настройки файла загрузки с пользовательской кнопкой.