HTML атрибут: accept (принять)

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

Попробуй

Обзор

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

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

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

HTML

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

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

HTML

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

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

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

Примеры

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

HTML

<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>

Только авторизованные участники могут оставлять комментарии.