Атрибут accept тега <input> — фільтр типів файлів

Встановлює фільтр на типи файлів, які ви можете відправити через поле завантаження файлів. Тип файлу вказується як MIME-тип. Атрибут використовується тільки з елементами управління, які дозволяють користувачеві вибрати файл (<input type = "file">). При натисканні на кнопку в переліку всіх файлів будуть відображатися тільки доступні для вибору (завантаження).

Приклад вибору зображення для завантаження.

правити

Загальний опис

правити

Порада

Атрибут accept може використовуватися тільки при <input type="file">.

автор: с3с правити

Порада

Не використовуйте цей атрибут як інструмент перевірки. Завантажений файл повинен бути перевірений на сервері.

автор: с3с правити

Нотатка

Щоб вказати більше одного значення, розділяйте значення комами (наприклад, <input accept="audio/*,video/*,image/*" type="text">.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input accept="file_extension|audio/*|video/*|image/*|media_type">

Атрибут accept може отримувати 5 значень:

file_extension

розширення файлу, починаючи з крапки, наприклад: .gif, .jpg, .png, .doc

автор: с3с

правити

audio/*

Всі звукові файли дозволено завантажувати

автор: с3с

правити

video/*

Всі відео файли дозволено завантажувати

автор: с3с

правити

image/*

Всі файли зображень дозволено завантажувати

автор: с3с

правити

media_type

Допустимий тип даних, без будь-яких параметрів. Подивіться на типи IANA Media для повного списку стандартних типів.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<form>
   <p><strong>Виберіть картинку</strong></p>
   <p><input type="file" name="img" accept="image/*">
     <br>
   <p><strong>Виберіть аудіо</strong></p>
   <p><input type="file" name="img" accept="audio/*">
     <br>
     <br>
   <input type="submit" value="Надіслати"></p>
  </form>

<form>
  <p><label>Лише зображення — <code>accept="image/*"</code><br>
    <input type="file" accept="image/*"></label></p>

  <p><label>Лише PDF — <code>accept="application/pdf,.pdf"</code><br>
    <input type="file" accept="application/pdf,.pdf"></label></p>

  <p><label>Таблиця CSV — три значення одразу, бо система часом видає свій MIME<br>
    <input type="file" accept=".csv,text/csv,application/vnd.ms-excel"></label></p>

  <p><label>Кілька картинок одразу — <code>multiple</code><br>
    <input type="file" accept="image/png,image/jpeg" multiple></label></p>

  <p><label>Без <code>accept</code> — у діалозі всі файли<br>
    <input type="file"></label></p>
</form>

<p class="note">У діалозі завжди можна перемкнутися на «Усі файли», а файл ще й перетягують мишкою. Тому це фільтр для зручності, а не перевірка: тип і розмір однаково перевіряють на сервері.</p>

p { margin: 0 0 14px; }
label { display: block; }
input[type="file"] { margin-top: 4px; }
code { background: #f2f2f2; padding: 0 3px; }
.note { border-left: 3px solid #c00; padding-left: 10px; color: #444; }