Пошук уроків, статей та іншого контенту
Додавайте завантаження файлів через input type="file" і налаштовуйте прийнятні формати та кількість файлів.
Для вибору файлів на комп’ютері або іншому пристрої використовують елемент:
<input type="file">Після натискання на нього браузер відкриває системне вікно вибору файлів.
<label for="avatar">Оберіть аватар:</label>
<input id="avatar" type="file">Атрибут for елемента label має збігатися зі значенням id поля. Тоді користувач може натиснути не лише на поле, а й на його підпис.
acceptАтрибут accept задає формати файлів, які бажано дозволити вибирати:
<label for="avatar">Аватар:</label>
<input
id="avatar"
type="file"
accept="image/png, image/jpeg"
>У цьому прикладі браузер запропонує файли PNG і JPEG.
Формати можна вказувати через MIME-типи:
<input type="file" accept="image/png, image/jpeg, image/webp">Поширені MIME-типи:
image/png — PNG-зображення;
image/jpeg — JPEG-зображення;
image/webp — WebP-зображення;
application/pdf — PDF-документи;
text/plain — текстові файли;
video/mp4 — MP4-відео;
audio/mpeg — MP3-аудіо.
Також можна вказати розширення:
<input type="file" accept=".pdf,.doc,.docx">Змішаний варіант:
<input
type="file"
accept="image/png, image/jpeg, .webp"
>Для поширених категорій можна використовувати спеціальні значення:
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">Наприклад, image/* дозволяє вибирати будь-які типи зображень, які підтримує браузер.
acceptдопомагає користувачу вибрати правильний файл, але не є повноцінною перевіркою безпеки. Сервер повинен самостійно перевіряти тип, розмір і вміст завантаженого файлу.
За замовчуванням поле type="file" дозволяє вибрати лише один файл:
<input type="file">Щоб дозволити вибір кількох файлів, додайте булевий атрибут multiple:
<label for="photos">Фотографії:</label>
<input
id="photos"
type="file"
accept="image/*"
multiple
>Користувач зможе вибрати одразу кілька зображень. У JavaScript вибрані файли будуть доступні через колекцію files.
filesЕлемент input типу file має властивість files. Вона містить об’єкт FileList із вибраними файлами.
<label for="documents">Документи:</label>
<input
id="documents"
type="file"
accept=".pdf,.doc,.docx"
multiple
>
<ul id="file-list"></ul>
<script>
const input = document.querySelector('#documents');
const list = document.querySelector('#file-list');
input.addEventListener('change', () => {
list.replaceChildren();
for (const file of input.files) {
const item = document.createElement('li');
item.textContent = `${file.name} — ${file.size} байт`;
list.append(item);
}
});
</script>Основні властивості об’єкта File:
name — ім’я файлу;
size — розмір у байтах;
type — MIME-тип;
lastModified — час останньої зміни файлу.
Якщо користувач не вибрав жодного файлу, input.files буде порожнім списком.
Для надсилання файлів серверу форму потрібно налаштувати за допомогою enctype="multipart/form-data":
<form action="/upload" method="post" enctype="multipart/form-data">
<div>
<label for="avatar">Аватар:</label>
<input
id="avatar"
name="avatar"
type="file"
accept="image/png, image/jpeg"
required
>
</div>
<div>
<label for="attachments">Додаткові файли:</label>
<input
id="attachments"
name="attachments"
type="file"
accept=".pdf,.doc,.docx"
multiple
>
</div>
<button type="submit">Завантажити</button>
</form>Важливі атрибути:
name — ім’я поля, за яким сервер отримає файл;
method="post" — метод надсилання форми;
enctype="multipart/form-data" — формат запиту, необхідний для передавання файлів;
multiple — дозвіл вибирати кілька файлів;
required — вимога вибрати хоча б один файл.
Без enctype="multipart/form-data" файл не буде коректно переданий у тілі форми.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Завантаження файлів</title>
</head>
<body>
<h1>Завантаження файлів</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<div>
<label for="profile-photo">Фото профілю:</label>
<input
id="profile-photo"
name="profilePhoto"
type="file"
accept="image/png, image/jpeg"
required
>
</div>
<div>
<label for="portfolio">Файли портфоліо:</label>
<input
id="portfolio"
name="portfolio"
type="file"
accept=".pdf,.doc,.docx"
multiple
>
</div>
<button type="submit">Надіслати</button>
</form>
<script>
const portfolioInput = document.querySelector('#portfolio');
portfolioInput.addEventListener('change', () => {
const files = Array.from(portfolioInput.files);
if (files.length === 0) {
console.log('Файли не вибрано');
return;
}
console.log('Вибрані файли:');
for (const file of files) {
console.log(`${file.name} — ${file.type} — ${file.size} байт`);
}
});
</script>
</body>
</html>Цей приклад:
вимагає вибрати одне фото у форматі PNG або JPEG;
дозволяє вибрати кілька документів із розширеннями .pdf, .doc або .docx;
надсилає дані на адресу /upload;
виводить інформацію про вибрані документи в консоль браузера.
Атрибут multiple не обмежує максимальну кількість файлів. Якщо потрібно дозволити, наприклад, не більше трьох файлів, перевірте кількість вибраних файлів у JavaScript:
<label for="images">До трьох зображень:</label>
<input id="images" type="file" accept="image/*" multiple>
<p id="message"></p>
<script>
const input = document.querySelector('#images');
const message = document.querySelector('#message');
input.addEventListener('change', () => {
if (input.files.length > 3) {
message.textContent = 'Можна вибрати не більше трьох файлів.';
input.value = '';
return;
}
message.textContent = `Вибрано файлів: ${input.files.length}`;
});
</script>Очищення через input.value = '' скасовує вибір файлів, якщо користувач перевищив допустиму кількість.
На клієнтському боці можна показати користувачу помилку до надсилання форми:
<label for="document">Документ PDF до 5 МБ:</label>
<input id="document" type="file" accept=".pdf,application/pdf">
<p id="error" role="alert"></p>
<script>
const input = document.querySelector('#document');
const error = document.querySelector('#error');
const maxSize = 5 * 1024 * 1024;
input.addEventListener('change', () => {
error.textContent = '';
const file = input.files[0];
if (!file) {
return;
}
if (file.type !== 'application/pdf') {
error.textContent = 'Оберіть PDF-файл.';
input.value = '';
return;
}
if (file.size > maxSize) {
error.textContent = 'Розмір файлу не може перевищувати 5 МБ.';
input.value = '';
}
});
</script>Така перевірка покращує взаємодію з користувачем, але серверна перевірка все одно необхідна. Дані від браузера не можна вважати надійними.
enctypeНеправильно:
<form action="/upload" method="post">
<input type="file" name="file">
</form>Правильно:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
</form>accept як захистуaccept не гарантує, що на сервер надійде файл потрібного типу. Користувач або інша програма може надіслати запит напряму, оминувши обмеження інтерфейсу.
На сервері потрібно перевіряти:
допустимий тип файлу;
фактичний вміст файлу;
розмір;
кількість файлів;
правила зберігання та імена файлів.
nameПоле без name не має імені для передавання серверу:
<input type="file">Для форми слід додати:
<input type="file" name="avatar">multiple обмежує кількістьАтрибут multiple лише дозволяє вибирати кілька файлів. Він не встановлює максимальну кількість. Таке обмеження потрібно реалізувати окремою перевіркою на клієнті та сервері.
JavaScript не може довільно встановити шлях до файлу на комп’ютері користувача. Це обмеження потрібне для захисту приватних даних. Скрипт може працювати лише з файлами, які користувач сам вибрав.
Для вибору файлів використовують <input type="file">.
Атрибут accept задає бажані MIME-типи або розширення файлів.
Значення image/*, video/* і audio/* описують цілі категорії форматів.
Атрибут multiple дозволяє вибрати кілька файлів.
Вибрані файли доступні через властивість input.files.
Для надсилання файлів форма повинна мати enctype="multipart/form-data".
Атрибут name визначає ім’я поля для сервера.
accept і клієнтські перевірки не замінюють перевірку на сервері.