Hogyan tölthetünk fel egy vagy több fájlt a FormData segítségével

Ebben a bejegyzésben megismerhetjük a modern webböngészőkben elérhető FormData felületet a HTML5 specifikáció részeként.

Látni fogunk példákat a FormData használatára az Ajax, Angular 7, Ionic és React alkalmazással.

Mi a FormData

A FormData egyszerűen egy adatstruktúra, amely kulcs-érték párok tárolására használható. Ahogy a neve is sugallja, formanyomtatvány-adatok tárolására tervezték, azaz használhatja a JavaScript-lel egy HTML-űrlapnak megfelelő objektum létrehozásához. Leginkább akkor hasznos, ha űrlapadatokat kell elküldenie a RESTful API-végpontokhoz, például egyetlen vagy több fájl feltöltéséhez az XMLHttpRequestinterfész, az fetch()API vagy az Axios használatával.

FormData objektumot úgy hozhat létre, hogy az newOperator segítségével példányosítja a FormData felületet :

const formData = new FormData() 

A formDatahivatkozás a FormData példányára utal. Számos metódust hívhat meg az objektumon az adatpárok hozzáadásához és kezeléséhez. Minden párnak van kulcsa és értéke.

Ezek a rendelkezésre álló módszerek a FormData objektumokon:

  • append(): kulcs-érték pár hozzáfűzésére szolgál az objektumhoz. Ha a kulcs már létezik, az értéket hozzáfűzi a kulcs eredeti értékéhez,
  • delete(): kulcs-érték pár törlésére szolgál,
  • entries(): egy Iterator objektumot ad vissza, amellyel végighúzhatja a listán az objektum kulcsérték párjait,
  • get(): a kulcs értékének visszaadására szolgál. Ha több értéket csatol, akkor az az első értéket adja vissza,
  • getAll(): egy megadott kulcs összes értékének visszaadására szolgál,
  • has(): arra használják, hogy ellenőrizzék, van-e kulcs,
  • keys(): visszaad egy Iterator objektumot, amellyel felsorolhatja az objektumban elérhető kulcsokat,
  • set(): értéket ad hozzá az objektumhoz a megadott kulccsal. Ez fel fogja használni az értéket, ha már létezik kulcs,
  • values(): Iterator objektumot ad vissza a FormData objektum értékeihez.

Fájlfeltöltési példa vanília JavaScript-sel

Most nézzünk meg egy egyszerű példát a fájl feltöltésére vanília JavaScript használatával, XMLHttpRequestés FormData.

Keresse meg a munkamappát, és hozzon létre és index.htmlfájloljon a következő tartalommal:

   Parcel Sandbox 

Egyszerűen létrehozunk egy HTML dokumentumot, amelyet azonosít az appazonosító. Ezután a index.jsfájlt egy címke segítségével vesszük fel .

Ezután hozza létre a index.jsfájlt, és adja hozzá a következő kódot:

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]); });

Először beillesztünk egy elemet a HTML oldalunkba. Ez lesz a feltöltendő fájl kiválasztásához.

Ezután a fájl beviteli elemét kérdezzük le a querySelector()módszerrel.

Ezután meghatározzuk azt a uploadFile()módszert, amelyben először deklarálunk egy   API_ENDPOINTváltozót, amely megtartja a fájl feltöltési végpontunk címét. Ezután létrehozunk egy XMLHttpRequestkérést és egy üres FormDataobjektumot.

A FormData függelék metódusát használjuk a metódus paramétereként továbbított fájl uploadFile()hozzáadásához a filekulcshoz. Ez létrehoz egy kulcs-érték párat filekulcsként, és az átadott fájl tartalmát értékként.

Ezután elküldjük a kérést a send()metódus használatával, XMLHttpRequestés FormDataargumentumként átadjuk az objektumot.

A uploadFile()módszer meghatározása után meghallgatjuk a változás eseményét az elemen, és uploadFile()argumentumként meghívjuk a   metódust a kiválasztott fájllal. A fájl a event.target.filestömbből érhető el .

Kísérletezhet ezzel a példával a következő homokozóból:

Több fájl feltöltése

Könnyedén módosíthatja a fenti kódot, hogy támogassa a több fájl feltöltését.

Először hozzá kell adnia a multipletulajdonságot az elemhez:

Most több fájlt is kiválaszthat a meghajtóról.

Ezután módosítsa a uploadFile()metódust úgy, hogy egy tömb fájlt elfogadjon argumentumként, és egyszerűen keresse meg a tömböt és csatolja a fájlokat az FormDataobjektumhoz:

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); }; 

Végül hívja meg a metódust egy tömb fájllal argumentumként:

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

Ezután megnézheti ezeket a speciális oktatóanyagokat az FormDataAngular, Ionic és a React használatához:

  • Hogyan lehet közzétenni a FormData szöget 7
  • React & Axios FormData
  • Több fájl feltöltése az Ionic 4 & FormData alkalmazással