Як додати у форму завантаження картинки в HTML?

HTMLJunior~2 хв читання

Щоб додати можливість завантаження картинки (або будь-якого файлу) через HTML-форму, використовується елемент <input type="file">.

Цей тип створює кнопку «Обрати файл», через яку користувач може обрати зображення зі свого пристрою, а браузер надішле його на сервер разом з іншими даними форми.

1. Базовий приклад форми завантаження картинки

html

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="photo">Завантажте фото:</label>
  <input type="file" id="photo" name="image" accept="image/*">
  <button type="submit">Надіслати</button>
</form>

Що тут важливо:

type="file" - створює кнопку вибору файлу;
name="image" - ім'я, під яким файл буде надіслано на сервер;
accept="image/*" - дозволяє обирати лише зображення (jpg, png, gif тощо);
enctype="multipart/form-data" - обов'язковий атрибут форми для передачі файлів;
method="post" - потрібен, щоб передавати бінарні дані (файли).

2. Розбір ключових частин

Створює інтерфейс для вибору файлу:

html

<input type="file" name="photo">

Можна обрати один файл.

Щоб дозволити вибір декількох, додайте атрибут multiple:

html

<input type="file" name="photos" multiple>

Атрибут accept

Обмежує тип файлів, які завантажуються.

Значення	Що дозволяє завантажувати
`image/*`	Усі типи зображень
`.jpg,.png,.gif`	Лише вказані формати
`video/*`	Відео
`audio/*`	Аудіо

Приклад:

html

<input type="file" name="avatar" accept=".jpg,.png">

Атрибут enctype

Форма з файлами обов'язково має містити:

html

enctype="multipart/form-data"

Це повідомляє браузеру, що дані потрібно упакувати особливим чином, інакше файл не дійде до сервера коректно.

3. Приклад з декількома файлами

html

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="files">Оберіть зображення:</label>
  <input type="file" id="files" name="gallery" accept="image/*" multiple>
  <button type="submit">Завантажити</button>
</form>

Користувач зможе обрати одразу декілька картинок.

4. Що відбудеться під час відправлення

Якщо користувач обрав файл photo.jpg, браузер надішле його разом з іншими даними форми:

javascript

Content-Disposition: form-data; name="image"; filename="photo.jpg"
Content-Type: image/jpeg

Сервер зможе прийняти й зберегти файл (наприклад, через PHP, Python Flask, Node.js тощо).

5. Додавання попереднього перегляду (необов'язково)

Можна показати мініатюру картинки перед завантаженням за допомогою JavaScript:

html

<input type="file" id="file" accept="image/*">
<img id="preview" width="200">

<script>
  const input = document.getElementById('file');
  const preview = document.getElementById('preview');

  input.addEventListener('change', () => {
    const file = input.files[0];
    if (file) {
      preview.src = URL.createObjectURL(file);
    }
  });
</script>

Тепер обрана картинка одразу з'явиться на сторінці перед відправленням.

Підсумок:

Елемент	Призначення
`<input type="file">`	Поле вибору файлу
`accept`	Обмежує тип файлів (наприклад, `image/*`)
`multiple`	Дозволяє обрати декілька файлів
`enctype="multipart/form-data"`	Обов'язковий атрибут форми для передачі файлів
`method="post"`	Використовується під час відправлення файлів
`name`	Ім'я поля, під яким файл надсилається на сервер

Простими словами: Щоб додати завантаження картинки, достатньо написати:

html

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

А щоб надіслати її на сервер, обгорніть це поле у форму з method="post" і enctype="multipart/form-data".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.