Атрибут accept в HTML

Атрибут HTML accept сообщает браузеру, какие типы файлов элемент управления <input type="file"> должен предлагать в системном диалоге выбора файлов. Это подсказка для пользовательского интерфейса, а не механизм безопасности или валидации: он помогает пользователю быстрее найти нужные файлы при нажатии кнопки загрузки.

На этой странице рассматривается, какие значения принимает accept (MIME-типы, расширения файлов и шаблоны с подстановочными символами), как их комбинировать, как значение обрабатывается в разных браузерах, как accept сочетается с атрибутом multiple и кодировкой формы, и почему необходимо по-прежнему проверять загружаемые файлы на сервере.

Атрибут accept можно использовать только на элементе <input>, и только когда его type равен file. На любом другом типе поля ввода он игнорируется.

Как браузер использует значение

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

• Chrome / Edge добавляют в выпадающий список типов файлов пункт, соответствующий вашему списку accept, и выбирают его по умолчанию, при этом позволяя пользователю переключиться на «Все файлы».
• Firefox фильтрует список аналогичным образом, а на некоторых платформах также предлагает вариант «Все файлы».
• Safari учитывает значение, однако формулировки и строгость фильтра отличаются от Chrome.

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

Синтаксис

<input type="file" accept="value">

Значение представляет собой разделённый запятыми список из одного или нескольких спецификаторов типов файлов. (В некоторых старых справочниках варианты отделялись символом | — этот символ означает «выберите один из этих видов значений» и не является допустимым в самом атрибуте.) Каждый спецификатор — одно из следующего:

В одном списке, разделённом запятыми, можно смешивать любые из этих вариантов.

Примеры

Принять любое изображение

<form action="/form/submit" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Принять конкретные MIME-типы

Используйте разделённый запятыми список, чтобы допустить только определённые форматы — здесь PNG и JPEG, но не GIF и не WebP:

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

Принять по расширению файла

Расширения удобны для форматов, у которых MIME-тип громоздкий или непоследовательный в разных системах, например для офисных документов:

<input type="file" name="document" accept=".pdf,.doc,.docx" />

Принять аудио или видео

<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />

<!-- any video file -->
<input type="file" name="clip" accept="video/*" />

Комбинировать MIME-типы с расширениями

В одном списке accept можно одновременно использовать оба варианта. Это удобно, когда шаблон с подстановочным символом слишком широк, а некоторые типы файлов проще выразить через расширение:

<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />

Работа с multiple и кодировкой формы

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

• Атрибут multiple позволяет пользователю выбрать сразу несколько файлов в диалоге. Он работает точно так же с accept: фильтр применяется к каждому добавляемому файлу.
• enctype="multipart/form-data" обязателен для элемента <form>, чтобы файлы были действительно отправлены. При обычной кодировке формы передаётся только имя файла, а не его содержимое.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="gallery">Choose images:</label>
  <input type="file" id="gallery" name="gallery" accept="image/*" multiple />
  <input type="submit" value="Upload" />
</form>

Подробнее о построении форм загрузки файлов читайте в справочниках по тегу HTML <form>, тегу HTML <input> и руководстве по HTML-формам.

Безопасность: никогда не доверяйте accept

Атрибут accept не является механизмом валидации. Полагаться на него в целях безопасности небезопасно по двум причинам:

• Подмена расширения. Имя файла (и следовательно, его расширение) ничего не говорит о реальном содержимом. Любой может переименовать malware.exe в photo.png. Фильтр accept проверяет только расширение и объявленный MIME-тип, оба из которых контролируются клиентом.
• Определение MIME-типа по содержимому. MIME-тип, который браузер сообщает для загружаемого файла, определяется по имени файла или операционной системой и может быть подделан. Сервер должен анализировать реальные байты файла, чтобы установить его истинный тип.

Поскольку пользователь может полностью обойти фильтр диалога, каждый загружаемый файл должен проверяться на сервере: определяйте реальный тип файла по его содержимому (а не по имени), ограничивайте размер файла, сохраняйте его вне корневого каталога веб-сервера или по безопасному пути и никогда не исполняйте загруженные файлы. Используйте accept только для улучшения пользовательского опыта, но не как защитный барьер.

Практика