accept: подсказка выбора файла
Атрибут accept ограничивает предлагаемые типы файлов в диалоге выбора input type=file.
Назначение
Атрибут accept ограничивает предлагаемые типы файлов в диалоге выбора input type=file.
Как это работает
В списке через запятую можно указывать расширения и MIME-типы. Это подсказка интерфейсу, а не проверка настоящего содержимого файла; пользователь или отдельный HTTP-клиент может обойти выбор.
Пример
<label for="avatar">Аватар в PNG или JPEG</label>
<input id="avatar" name="avatar" type="file" accept="image/png,image/jpeg,.png,.jpg,.jpeg">Что должно получиться
Диалог предлагает изображения указанных форматов. Пример ничего не загружает на сервер и не подтверждает безопасность выбранного файла.
Граница применения и частая ошибка
Сервер должен проверять размер, реальный формат и правила хранения. Нельзя разрешать выполнение загруженного файла только потому, что его имя заканчивается на расширение изображения.
Самостоятельная проверка
В локальном проекте откройте диалог и сравните фильтр. Подготовьте серверные правила отдельно: допустимый размер, определение типа и имя хранения не выводятся из accept автоматически.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.