Інтерфейс JavaScript FormData надає метод для створення об’єкта з парами ключ-значення. Цими об’єктами можна поділитися через Інтернет за допомогою методу fetch() або XMLHttpRequest.send(). Він використовує функціональні можливості елемента форми HTML. Він використовуватиме той самий формат, який використовуватиме форма з типом кодування, встановленим як «multipart/form-data».
Ми також можемо передати його безпосередньо в конструктор URLSearchParams, щоб отримати параметри запиту так само, як у поведінці тегу під час подання запиту GET.
Зазвичай він використовується для створення набору даних для надсилання його на сервер. Об’єкт FormData — це масив масивів, який містить один масив для кожного елемента.
Ці масиви мають такі три значення:
ім'я: Він містить назву поля.
значення: Він містить значення поля, яке може бути об’єктом String або Blob.
ім'я файлу: Він містить назву файлу, яка є рядком, що містить назву. Ім’я буде збережено на сервері, коли об’єкт blob передається як 2ndпараметр.
Чому FormData?
Елементи форми HTML розроблено таким чином, що автоматично фіксує її поля та значення. У таких сценаріях інтерфейс FormData допомагає нам надсилати HTML-форми з файлами та додатковими полями або без них.
Це об’єкт, який містить дані форми, введені користувачем.
Нижче наведено конструктор даних форми:
let formData = new FormData([form]);
Об’єкти FormData можуть бути прийняті як тіло мережевими методами, такими як fetch. За замовчуванням він кодується та надсилається з Content-Type: multipart/form-data.
Сервер розглядатиме це як звичайне надсилання форми.
Давайте розберемо простий приклад надсилання FormData.
Надсилання базових даних форми
У наведеній нижче формі ми надсилаємо простий FormData на сервер.
Index.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; У наведеному вище прикладі ми не встановлюємо серверний API для надсилання даних, оскільки це виходить за рамки цього посібника. Але ми можемо перевірити корисне навантаження на вкладку мережі та зрозуміти, як працює інтерфейс FormData.
Отже, якщо ми подивимося на мережевий запит в інструменті розробника, він покаже таке корисне навантаження:
У наведеному вище мережевому запиті дані форми надсилаються через мережу за допомогою об’єкта FormData. В інших випадках нам потрібно вказати кілька методів для отримання даних із форми.
Таким чином, використовуючи інтерфейс FormData, ми можемо легко відправити formData на сервер. Це лише однорядковий код.
Конструктор FormData
Конструктор FormData() використовується для створення нового об’єкта FormData. Його можна використовувати в такі способи:
new FormData() new FormData(form) new FormData(form, submitter)
Параметри:
форма (необов'язково):
Це елемент HTML; якщо його вказано, об’єкт FormData буде заповнено поточними ключами/значеннями форми. Він використовує властивості атрибута назви кожного елемента для ключів і їх подане значення для значень. Він також кодує вхідний вміст файлу.
заявник (необов'язково):
Кнопка відправника є елементом форми. Якщо елемент submitter має властивість атрибута name, то його дані будуть включені в об’єкт FormData.
псевдокод java
Методи FormData
FormData надає кілька методів, які можуть бути корисними для доступу та зміни даних полів форми.
У меншій кількості випадків може знадобитися змінити дані форми перед надсиланням на сервер. Ці методи можуть бути корисними в цих випадках.
Нижче наведено кілька корисних методів formData:
formData.append(ім'я, значення)
Він приймає назву та значення двох аргументів і додає об’єкт поля форми з наданим ім’ям і значенням.
formData.append(ім'я, blob, ім'я файлу)
Він приймає аргументи name, blob і fileName. Він додає поле для формування об’єктів даних, якщо елемент HTML є , тоді третій аргумент fileName встановлює ім’я файлу відповідно до імені файлу у файловій системі користувача.
formData.delete(ім'я)
Він приймає назву як аргумент і видаляє вказане поле з такою ж назвою.
як дізнатися розмір монітора
formData.get(ім'я)
Він також приймає ім’я як аргумент і отримує значення вказаного поля з заданим ім’ям.
formData.has(ім'я)
Він також приймає ім'я як аргумент, перевіряє існування поля з заданим ім'ям і повертає значення true, якщо воно існує; інакше false.
Форма може мати кілька полів з однаковою назвою, тому нам потрібно вказати кілька методів додавання, щоб додати всі ці поля з однаковою назвою.
Але одноіменні поля спричинятимуть помилки та ускладнюватимуть їх налаштування в базі даних. Таким чином, formData надає інший метод із таким самим синтаксисом, як append, але він видаляє всі поля з заданим іменем, а потім додає нове поле. Таким чином, це гарантує наявність унікального ключа з іменем.
formData.set(name, value) formData.set(name, blob, fileName)
У методі set синтаксис працює як метод append.
Як ітерувати FormData?
FormData надає метод FormData.entries() для перебору всіх його ключів. Цей метод повертає ітератор, який перебирає всі записи ключ/значення у FormData. Ключ — це рядковий об’єкт, тоді як значення може бути або краплею, або рядком.
Розглянемо наведений нижче приклад:
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } Результатом наведеного вище прикладу буде:
key1, value1 key2, value2
Надсилання форми з файлом даних
Файли також можна надсилати за допомогою FormData. Файли працюють з елементом форми, і він надсилається як Content-Type: multipart/form-data. Кодування multipart/form-data дозволяє надсилати файли. Отже, за замовчуванням це частина даних форми. Ми можемо надсилати файли на сервер із кодуванням form-data.
Розглянемо наведений нижче приклад:
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; У наведеному вище прикладі об’єкт зображення надсилається у двійковому форматі за допомогою FormData. Ми можемо переглянути це на вкладці мережі інструменту розробника:
Надсилання даних форми як об’єкта Blob
Надсилання даних форми як об’єкта blob – це простий спосіб надсилання динамічно згенерованих двійкових даних. Це може бути будь-яке зображення або крапка; ми можемо безпосередньо надіслати його на сервер, передавши його в тіло отримання.
Зручно надсилати дані зображення та інші дані форми, такі як ім’я, пароль тощо. Крім того, сервери більш зручні для прийому форм, закодованих у кількох частинах, а не у двійкових даних.
Розглянемо наведений нижче приклад, який надсилає зображення разом з іншими даними форми як форму.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } У наведеному вище прикладі ми бачимо, як краплю зображення додано наступним чином:
formData.append('image', imageBlob, 'image.webp');
Це те саме, що й , і користувач надіслав файл із назвою «image.webp» із деякими даними imageBlob із файлової системи. Сервер читатиме їх як дані звичайної форми.