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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Элемент <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.

        
          
          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 = ''
  }
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          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>
  );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать