Як завантажити один або кілька файлів простим способом за допомогою FormData

У цій публікації ми дізнаємося про інтерфейс FormData, доступний у сучасних веб-браузерах як частину специфікації HTML5.

Ми побачимо приклади використання FormData з Ajax, Angular 7, Ionic та React.

Що таке FormData

FormData - це просто структура даних, яка може використовуватися для зберігання пар ключ-значення. Так само, як випливає з назви, він призначений для зберігання даних форм, тобто ви можете використовувати його з JavaScript для створення об'єкта, який відповідає HTML-формі. Це в основному корисно, коли вам потрібно надіслати дані форми в кінцеві точки RESTful API, наприклад, для завантаження окремих або декількох файлів за допомогою XMLHttpRequestінтерфейсу, fetch()API або Axios.

Ви можете створити об’єкт FormData, створивши екземпляр інтерфейсу FormData, використовуючи newоператор наступним чином:

const formData = new FormData() 

formDataПосилання відноситься до примірника FormData. Ви можете викликати багато методів для об’єкта для додавання та роботи з парами даних. Кожна пара має ключ і значення.

Ось доступні методи для об’єктів FormData:

  • append(): використовується для додавання пари ключ-значення до об’єкта. Якщо ключ уже існує, значення додається до початкового значення для цього ключа,
  • delete(): використовується для видалення пари ключ-значення,
  • entries(): повертає об'єкт ітератора, за допомогою якого можна прокрутити список пар значень ключа в об'єкті,
  • get(): використовується для повернення значення ключа. Якщо додано кілька значень, воно повертає перше значення,
  • getAll(): використовується для повернення всіх значень для вказаного ключа,
  • has(): використовується для перевірки наявності ключа,
  • keys(): повертає об'єкт ітератора, за допомогою якого можна перерахувати доступні ключі в об'єкті,
  • set(): використовується для додавання значення об’єкту за допомогою вказаного ключа. Це буде співвідносити значення, якщо ключ уже існує,
  • values(): повертає об'єкт Iterator для значень об'єкта FormData.

Приклад завантаження файлу за допомогою ванільного JavaScript

Давайте тепер побачимо простий приклад завантаження файлів за допомогою ванільного JavaScript XMLHttpRequestі FormData.

Перейдіть до вашої робочої папки та створіть та index.htmlфайл із таким вмістом:

   Parcel Sandbox 

Ми просто створюємо HTML - документ з ідентифікується appідентифікатором. Далі ми включаємо index.jsфайл за допомогою тегу.

Далі створіть index.jsфайл і додайте наступний код:

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

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

Далі ми запитуємо елемент введення файлу, використовуючи querySelector()метод.

Далі ми визначаємо uploadFile()метод, при якому ми спочатку оголошуємо   API_ENDPOINTзмінну, яка містить адресу кінцевої точки завантаження нашого файлу. Далі ми створюємо XMLHttpRequestзапит і порожній FormDataоб’єкт.

Ми використовуємо метод додавання FormData, щоб додати файл, переданий як параметр uploadFile()методу, до fileключа. Це створить пару ключ-значення з fileяк ключ, а вміст переданого файлу як значення.

Далі ми надсилаємо запит send()методом XMLHttpRequestі передаємо FormDataоб’єкт як аргумент.

Після визначення uploadFile()методу ми прослуховуємо подію зміни елемента і викликаємо   uploadFile()метод з вибраним файлом як аргумент. Доступ до файлу здійснюється з event.target.filesмасиву.

Ви можете поекспериментувати з цим прикладом із цієї пісочниці коду:

Завантаження декількох файлів

Ви можете легко змінити наведений вище код для підтримки завантаження декількох файлів.

Спочатку потрібно додати multipleвластивість до елемента:

Тепер ви зможете вибрати кілька файлів зі свого диска.

Далі змініть uploadFile()метод, щоб прийняти масив файлів як аргумент, і просто прокрутити масив і додати файли до FormDataоб’єкта:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

Нарешті, викликаємо метод з масивом файлів як аргумент:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Далі ви можете ознайомитись із цими розширеними підручниками щодо використання FormDataз Angular, Ionic та React:

  • Як опублікувати дані форми за допомогою Angular 7
  • React & Axios FormData
  • Завантаження декількох файлів за допомогою Ionic 4 & FormData