Атрибут HTML: accept

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

Свойство accept является атрибутом элемента file типа <input>. Оно поддерживалось для элемента <form>, но было удалено в пользу элемента file.

Поскольку один тип файла может быть идентифицирован несколькими способами, полезно предоставить полный набор спецификаторов типа, когда вам нужны файлы определенного типа, или использовать символ подстановки, чтобы указать, что приемлемы файлы любого формата.

Например, существуют различные способы идентификации файлов Microsoft Word, поэтому сайт, принимающий файлы Word, может использовать <input> следующим образом:

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

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

<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />

Атрибут accept не проверяет типы выбранных файлов; он даёт подсказки браузерам для наведения пользователей на выбор правильных типов файлов. Тем не менее, пользователи всё равно могут (в большинстве случаев) изменить опцию в диалоге выбора файлов, чтобы обойти это ограничение и выбрать любой файл, а затем выбрать неверные типы файлов.

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

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

<p>
  <label for="soundFile">Select an audio file:</label>
  <input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Select a video file:</label>
  <input type="file" id="videoFile" accept="video/*" />
</p>
<p>
  <label for="imageFile">Select some images:</label>
  <input type="file" id="imageFile" accept="image/*" multiple />
</p>

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

Уникальный спецификатор типа файла — это строка, описывающая тип файла, который пользователь может выбрать в элементе <input> типа file. Каждый уникальный спецификатор типа файла может иметь один из следующих форматов:

• Действительное расширение имени файла (регистронезависимое), начинающееся с точки (".") символа. Например: .jpg, .pdf, или .doc.
• Действительная строка типа MIME без расширений.
• Строка audio/* , означающая «любой аудиофайл».
• Строка video/* , означающая «любой видеофайл».
• Строка image/* , означающая «любой графический файл».

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

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Это приводит к следующему результату:

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

Включение атрибута multiple, как показано выше, указывает, что можно выбрать несколько файлов одновременно. Пользователь может выбрать несколько файлов из диалогового окна выбора файлов любым способом, допускаемым его платформой (например, нажав клавиши Shift или Control, а затем щелкнув). Если вы хотите, чтобы пользователь выбирал только один файл за раз <input>, опустите атрибут multiple.

Часто вы не захотите, чтобы пользователь мог выбрать произвольный тип файла; вместо этого вы хотите, чтобы он выбирал файлы определенного типа или типов. Например, если элемент ввода файла позволяет пользователям загружать аватарку, вы, вероятно, захотите, чтобы они выбирали поддерживаемые веб-форматы изображений, такие как JPEG или PNG.

Допустимые типы файлов могут быть указаны с помощью атрибута accept, который принимает список разрешённых расширений файлов или типов MIME, разделённых запятыми. Вот несколько примеров:

• accept="image/png" или accept=".png" — Принимает файлы PNG.
• accept="image/png, image/jpeg" или accept=".png, .jpg, .jpeg" — Принимает файлы PNG или JPEG.
• accept="image/*" — Принимает любой файл с типом MIME image/*. (Многие мобильные устройства также позволяют пользователю сделать снимок с камеры, когда это используется.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — принимает любой файл, похожий на документ MS Word.

Давайте рассмотрим более полный пример:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

• Использование файлов из веб-приложений
• API файлов