accept Атрибут HTML

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

Попробуйте

<label for="movie">Choose a movie to upload:</label>

<input type="file" id="movie" name="movie" accept="video/*" />

<label for="poster">Choose a poster:</label>

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

label {
  display: block;
  margin-top: 1rem;
}

input {
  margin-bottom: 1rem;
}

Обзор

Атрибут 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 не проверяет типы выбранных файлов; он предоставляет браузерам подсказки, помогающие пользователям выбрать нужные типы файлов. В большинстве случаев пользователи всё ещё могут переключить параметр в окне выбора файла, чтобы обойти это ограничение и выбрать любой файл, в том числе неподходящего типа.

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

Примеры

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

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

Спецификации

Совместимость с браузерами

См. также

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