Кратко

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

Пример

Рассмотрим пример формы, где пользователю предлагается прикрепить фотографию кота:

<form method="post">
  <label for="cat-picture">Прикрепите фото кота</label>
  <input
    type="file"
    id="cat-picture"
    name="cat-picture"
    accept=".jpg, .jpeg, .png"
  >
  <button>Прикрепить</button>
</form>

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

Подсказки

? Что делать, если у пользователя несколько котов и он хочет показать вам всех? Поможет атрибут multiple.

Как пишется

Атрибут accept применяется только к элементу <input> с типом file. Он может принимать следующие значения:

• 'audio/*' — принимает звуковые файлы любого формата;

• 'video/*' — принимает видео любого формата;

• 'image/*' — принимает изображения любого формата;

• 'image/jpeg' — JPEG изображения;

• 'image/png' — PNG изображения;

• 'application/pdf' — PDF документы;

• 'audio/mpeg' — MP3 аудио файлы;

• 'video/mp4' — MP4 видео файлы;

• Строка типа MIME без расширений;

• Расширения файла, перед которыми стоит точка. Например: .jpg, .pdf, .docx и так далее.

Можно указать несколько значений, а ещё их можно сочетать, например:

<input type="file" name="cat-pic-video" accept="video/*, .jpg, .jpeg, .png">

Также комбинировать MIME-типы и расширения файлов для большей гибкости:

<input type="file" name="documents" accept=".pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Демонстрация работы

Тут можно пощупать как браузер ведёт себя с расширениями для всех типов избражений, видео и определёнными расширениями документов:

Демо: Выбор файлов

А тут с определёнными расширениями изображений:

Демо: Выбор изображений

Недопустимые значения

Атрибут accept не принимает произвольные строки, не соответствующие форматам MIME или файловым расширениям. Например, значение text без указания расширения или MIME-типа будет недействительным.

Ограничения и особенности

Ограничения

1. Поддержка браузерами: некоторые старые браузеры могут не поддерживать атрибут accept полностью, особенно когда дело касается сложных комбинаций MIME-типов и расширений файлов. Стоит проверить поддержку атрибута в конкретных браузерах на Can I Use.

2. Отсутствие фильтрации на клиенте: атрибут accept не предотвращает загрузку неподходящих файлов. Это только ориентир для диалогового окна выбора файлов.

3. Требуется серверная проверка: необходимо реализовать проверку типов файлов на стороне сервера для обеспечения безопасности и корректной работы приложения.

Поведение элемента с этим атрибутом

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

Использование с другими атрибутами

• Атрибут multiple: позволяет пользователю выбрать несколько файлов.

<input type="file" name="cat-pictures" accept=".jpg, .jpeg, .png" multiple>

• Атрибут required: указывает, что поле обязательно для заполнения.

<input type="file" name="cat-picture" accept=".jpg, .jpeg, .png" required>

Дополнительные особенности

Советы по улучшению UX

Для улучшения пользовательского опыта можно использовать JavaScript для предварительной проверки выбранных файлов до отправки формы. Пример:

document.getElementById('cat-picture').addEventListener('change', function() {
  const file = this.files[0];
  if (file && !file.type.match('image.*')) {
    alert('Пожалуйста, выберите изображение.');
    this.value = '';
  }
});

Как понять

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