Клавиша / esc

Атрибут accept

При выборе прикрепляемого файла этот атрибут покажет только разрешённые типы.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

        
        
          
        
      

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

Как понять

Скопировано

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

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

Как пишется

Скопировано

Атрибут 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">
          <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  ">
          <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. Требуется серверная проверка: необходимо реализовать проверку типов файлов на стороне сервера для обеспечения безопасности и корректной работы приложения.

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

Скопировано

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

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

        
        
          
        
      

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

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

        
        
          
        
      

Подсказки

Скопировано

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

На практике

Скопировано

Игорь Теплостанский советует

Скопировано

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

Пример:

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

        
        
          
        
      

🛠 В современных фреймворках, таких как React или Vue, можно интегрировать атрибут accept напрямую в ваш компонентный подход.

Например, в React компоненте это может выглядеть так:

        
          
          function UploadForm() {  return (    <form method="post">      <label htmlFor="cat-picture">Прикрепите фото кота</label>      <input        type="file"        id="cat-picture"        name="cat-picture"        accept=".jpg, .jpeg, .png"      />      <button>Прикрепить</button>    </form>  );}
          function UploadForm() {
  return (
    <form method="post">
      <label htmlFor="cat-picture">Прикрепите фото кота</label>
      <input
        type="file"
        id="cat-picture"
        name="cat-picture"
        accept=".jpg, .jpeg, .png"
      />
      <button>Прикрепить</button>
    </form>
  );
}