У цьому розділі йдетьÑÑ Ð¿Ñ€Ð¾ Ð²Ñ–Ð´Ð¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð½Ñ HTML-форм: з файлами та без, з додатковими полÑми й так далі.
Об’єкти FormData допоможуть нам із цим. Як ви, напевно, здогадалиÑÑ Ð·Ð° назвою, це об’єкт, що предÑтавлÑÑ” дані HTML форми.
КонÑтруктор:
let formData = new FormData([form]);Якщо передати в конÑтруктор елемент HTML-форми form, то об’єкт, що ÑтворюєтьÑÑ, автоматично прочитає з неї полÑ.
Його оÑобливіÑÑ‚ÑŒ полÑгає в тому, що методи Ð´Ð»Ñ Ñ€Ð¾Ð±Ð¾Ñ‚Ð¸ з мережею, наприклад, fetch, дозволÑÑŽÑ‚ÑŒ вказати об’єкт FormData у влаÑтивоÑÑ‚Ñ– тіла запиту body.
Тобто Ð´Ð»Ñ Ñервера це виглÑдає Ñк звичайне надÑÐ¸Ð»Ð°Ð½Ð½Ñ Ñ„Ð¾Ñ€Ð¼Ð¸.
ÐадÑÐ¸Ð»Ð°Ð½Ð½Ñ Ð¿Ñ€Ð¾Ñтої форми
Давайте Ñпочатку надішлемо проÑту форму.
Як ви бачите, код дуже компактний:
<form id="formElem">
<input type="text" name="name" value="John">
<input type="text" name="surname" value="Smith">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>У цьому прикладі Ñерверний код не предÑтавлений, він за рамками цієї Ñтатті, він приймає POST-запит із даними форми та відповідає повідомленнÑм «КориÑтувач збережений».
Методи об’єкта FormData
За допомогою наведених нижче методів ми можемо змінювати Ð¿Ð¾Ð»Ñ Ð² об’єкті FormData:
formData.append(name, value)– додає до об’єкта поле з іменемnameÑ– значеннÑмvalue,formData.append(name, blob, fileName)– додає поле так, ніби це<input type="file">, третій аргументfileNameвÑтановлює Ñ–Ð¼â€™Ñ Ñ„Ð°Ð¹Ð»Ñƒ (не Ñ–Ð¼â€™Ñ Ð¿Ð¾Ð»Ñ Ñ„Ð¾Ñ€Ð¼Ð¸), ніби це Ñ–Ð¼â€™Ñ Ð· файлової ÑиÑтеми кориÑтувача,formData.delete(name)– видалÑÑ” поле по заданомуname,formData.get(name)– діÑтає Ð·Ð½Ð°Ñ‡ÐµÐ½Ð½Ñ Ð¿Ð¾Ð»Ñ Ð¿Ð¾ заданомуname,formData.has(name)– перевірÑÑ” чи Ñ–Ñнує поле по заданомуname, повертаєtrue, інакшеfalse
Технічно форма може мати багато полів з тим Ñамим ім’Ñм name, тому кілька викликів append додадуть кілька полів з однаковими іменами.
Ще Ñ–Ñнує метод set, його ÑинтакÑÐ¸Ñ Ñ‚Ð°ÐºÐ¸Ð¹ Ñамий, Ñк у append. Ð Ñ–Ð·Ð½Ð¸Ñ†Ñ Ð² тому, що .set видалÑÑ” вÑÑ– наÑвні Ð¿Ð¾Ð»Ñ Ð· ім’Ñм name Ñ– тільки потім додає нове. Тобто цей метод гарантує, що Ñ–Ñнуватиме лише одне поле з ім’Ñм name, у вÑьому іншому він аналогічний .append:
formData.set(name, value),formData.set(name, blob, fileName).
ÐŸÐ¾Ð»Ñ Ð¾Ð±â€™Ñ”ÐºÑ‚Ð° formData можна перебирати, викориÑтовуючи цикл for..of:
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// СпиÑок пар ключ/значеннÑ
for(let [name, value] of formData) {
alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}ÐадÑÐ¸Ð»Ð°Ð½Ð½Ñ Ñ„Ð¾Ñ€Ð¼Ð¸ з файлом
Об’єкти FormData завжди поÑилаютьÑÑ Ñ–Ð· заголовком Content-Type: multipart/form-data, цей ÑпоÑіб ÐºÐ¾Ð´ÑƒÐ²Ð°Ð½Ð½Ñ Ð´Ð¾Ð·Ð²Ð¾Ð»ÑÑ” надÑилати файли. Таким чином, Ð¿Ð¾Ð»Ñ <input type="file"> відправлÑÑŽÑ‚ÑŒÑÑ Ñ‚Ð°Ðº Ñамо, Ñк Ñ– решта полів форми.
Приклад такої форми:
<form id="formElem">
<input type="text" name="firstName" value="John">
Picture: <input type="file" name="picture" accept="image/*">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user-avatar', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>ÐадÑÐ¸Ð»Ð°Ð½Ð½Ñ Ñ„Ð¾Ñ€Ð¼Ð¸ з даними Blob
Раніше у главі Fetch ми бачили, що дуже легко відправити динамічно згенеровані бінарні дані у форматі Blob. Ми можемо Ñвно передати Ñ—Ñ… до параметра body запиту fetch.
Ðле на практиці буває зручніше відправлÑти Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð½Ñ Ð½Ðµ окремо, а у Ñкладі форми, додавши додаткові Ð¿Ð¾Ð»Ñ Ð´Ð»Ñ Ñ–Ð¼ÐµÐ½Ñ– та інші метадані.
Крім того, Ñервери чаÑто налаштовані на Ð¿Ñ€Ð¸Ð¹Ð¼Ð°Ð½Ð½Ñ Ñаме форм, а не проÑто бінарних даних.
У прикладі нижче надÑилаєтьÑÑ Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð½Ñ Ð· <canvas> Ñ– ще кілька полів, Ñк форма, викориÑтовуючи FormData:
<body style="margin:0">
<canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
<input type="button" value="Submit" onclick="submit()">
<script>
canvasElem.onmousemove = function(e) {
let ctx = canvasElem.getContext('2d');
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
};
async function submit() {
let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
let formData = new FormData();
formData.append("firstName", "John");
formData.append("image", imageBlob, "image.png");
let response = await fetch('/article/formdata/post/image-form', {
method: 'POST',
body: formData
});
let result = await response.json();
alert(result.message);
}
</script>
</body>Будь лаÑка, зверніть увагу на те, Ñк додаєтьÑÑ Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð½Ñ Blob:
formData.append("image", imageBlob, "image.png");Це Ñк би у формі був елемент <input type="file" name="image"> Ñ– кориÑтувач прикріпив би файл з ім’Ñм "image.png" (3й аргумент) та даними imageBlob (2й аргумент) зі Ñвоєї файлової ÑиÑтеми.
Сервер прочитає Ñ– дані Ñ– файл, так Ñамо, Ñкби це була звичайна відправка форми.
ПідÑумки
Об’єкти FormData викориÑтовуютьÑÑ, щоб взÑти дані з HTML-форми та відправити Ñ—Ñ… за допомогою fetch або іншого методу Ð´Ð»Ñ Ñ€Ð¾Ð±Ð¾Ñ‚Ð¸ з мережею.
Ми можемо Ñтворити такий об’єкт з даними, передавши в конÑтруктор HTML-форму – new FormData(form), або ж можна Ñтворити об’єкт взагалі без форми Ñ– потім додати до нього Ð¿Ð¾Ð»Ñ Ð·Ð° допомогою методів:
formData.append(name, value)formData.append(name, blob, fileName)formData.set(name, value)formData.set(name, blob, fileName)
Зазначимо дві оÑобливоÑÑ‚Ñ–:
- Метод
setвидалÑÑ” Ð¿Ð¾Ð»Ñ Ð· таким Ñамим іменем, аappend– ні. У цьому Ñ—Ñ…Ð½Ñ Ñ”Ð´Ð¸Ð½Ð° відмінніÑÑ‚ÑŒ. - Щоб надіÑлати файл, потрібно викориÑтовувати ÑинтакÑÐ¸Ñ Ð· трьома аргументами, Ñк третій вказуєтьÑÑ Ñ–Ð¼â€™Ñ Ñ„Ð°Ð¹Ð»Ñƒ, Ñке зазвичай, при
<input type="file">, беретьÑÑ Ð· файлової ÑиÑтеми.
Інші методи:
formData.delete(name)formData.get(name)formData.has(name)
От Ñ– вÑе!
Коментарі
<code>, Ð´Ð»Ñ ÐºÑ–Ð»ÑŒÐºÐ¾Ñ… Ñ€Ñдків – обгорніть Ñ—Ñ… тегом<pre>, Ð´Ð»Ñ Ð¿Ð¾Ð½Ð°Ð´ 10 Ñ€Ñдків – викориÑтовуйте піÑочницю (plnkr, jsbin, codepen…)