Как да качвате единични или множество файлове по лесния начин с 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 документ с идентифициран от appID. След това включваме 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:

  • Как да публикувате FormData с Angular 7
  • React & Axios FormData
  • Качване на множество файлове с Ionic 4 и FormData