Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як додати у форму завантаження картинки в HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Щоб додати можливість завантаження картинки (або будь-якого файлу) через HTML-форму, використовується елемент `<input type="file">`. Цей тип створює кнопку «Обрати файл», через яку користувач може обрати зображення зі свого пристрою, а браузер надішле його на сервер разом з іншими даними форми. **Ключове:** форма з файлами обов'язково має містити `enctype="multipart/form-data"`, інакше файл не дійде до сервера коректно.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЩоб додати можливість **завантаження картинки (або будь-якого файлу)** через 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. Розбір ключових частин #### <input type="file"> Створює інтерфейс для вибору файлу: ```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"`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.