Атрибут 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>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Атрибут accept может принимать строку значений:

  1. 'audio/*' — принимает звуковые файлы любого формата.
  2. 'video/*' — принимает видео любого формата.
  3. 'image/*' — принимает изображения любого формата.
  4. Строка типа MIME без расширений.
  5. Расширения файла, перед которыми стоит точка. Например: .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">

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

Подсказки

Секция статьи "Подсказки"

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