Атрибут accept

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