Атрибут accept тега <input>
Описание
Атрибут accept указывает типы файлов, которые можно загружать через элемент <input type="file">. Он помогает фильтровать допустимые форматы файлов при выборе.
<input
type="file"
accept="image/*, .pdf, .docx"
id="file-upload">
Основные значения форматов:
| Тип файла | Пример | Описание |
|---|---|---|
| Изображения | image/* или .png, .jpg |
Все изображения или конкретные форматы |
| Документы | .pdf, .docx |
Конкретные расширения файлов |
| Аудио/Видео | audio/*, video/* |
Все аудио или видео файлы |
| MIME-типы | application/msword |
Специфические MIME-типы |
Примеры для разных сценариев:
<!-- Только изображения -->
<input type="file" accept="image/*">
<!-- Конкретные форматы документов -->
<input type="file" accept=".pdf,.doc,.docx,.txt">
<!-- Несколько типов -->
<input type="file" accept="image/*,.pdf,.zip">
Рекомендации по использованию:
- Используйте конкретные расширения для точного контроля
- Указывайте MIME-типы для более строгой валидации
- Сочетайте с серверной проверкой (клиентская проверка ненадёжна)
- Добавляйте подсказку о допустимых форматах
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Не заменяет серверную валидацию (можно обойти)
- В некоторых браузерах может показывать только указанные типы
- Не блокирует загрузку других типов файлов (только фильтрует)
Примечание: Хотя атрибут accept улучшает пользовательский опыт, всегда дублируйте проверку на сервере. Для сложных сценариев рассмотрите использование JavaScript-библиотек для загрузки файлов с расширенной валидацией.