Тип інпута для завантаження файлу в HTML

Тип інпута file в HTML

Для створення поля вибору файлу використовується тег input з атрибутом type="file". За допомогою нього користувач може вибрати файл зі свого пристрою.

• type="file" — створює кнопку вибору файлу.
• Користувач може вибрати файл зі свого комп'ютера або телефону.
• Вибраний файл можна передати на сервер через форму.

Простий приклад завантаження файлу

<form>

  <label>
    Виберіть файл:
    <input type="file">
  </label>

</form>

<form 
  method="post" 
  enctype="multipart/form-data"
>

  <label>
    Фото:
    <input 
      type="file"
      name="photo"
    >
  </label>

  <br>

  <input 
    type="submit"
    value="Завантажити"
  >

</form>

Атрибут enctype

Для передачі файлів через форму потрібно додати атрибут enctype="multipart/form-data". Без нього файл не буде правильно відправлений.

<form enctype="multipart/form-data">

  <input type="file">

</form>

Додаткові атрибути file

• multiple — дозволяє вибрати декілька файлів.
• accept — обмежує типи файлів.
• required — робить вибір файлу обов'язковим.

<input
  type="file"
  accept="image/*"
  multiple
  required
>

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

<form>

  <label>
    Завантажте фото:
    <input
      type="file"
      accept="image/png, image/jpeg"
    >
  </label>

</form>

Практичне завдання

<!-- Початковий код -->

<form>

</form>

<form
  method="post"
  enctype="multipart/form-data"
>

  <label>
    Фото:
    <input
      type="file"
      accept="image/*"
      required
    >
  </label>

  <br>

  <button>
    Завантажити
  </button>

</form>