Rozhranie JavaScript FormData poskytuje metódu na vytvorenie objektu s pármi kľúč – hodnota. Tieto objekty je možné zdieľať cez internet pomocou metódy fetch() alebo XMLHttpRequest.send(). Využíva funkčnosť prvku formulára HTML. Použije rovnaký formát, aký bude používať formulár, ktorého typ kódovania je nastavený na 'multipart/form-data'.
Môžeme ho tiež odovzdať priamo konštruktoru URLSearchParams, aby sme získali parametre dopytu rovnako ako v správaní značky pri odoslaní požiadavky GET.
Vo všeobecnosti sa používa na vytvorenie súboru údajov, ktorý ich odošle na server. Objekt FormData je pole polí, ktoré obsahuje jedno pole pre každý prvok.
Tieto polia majú nasledujúce tri hodnoty:
názov: Obsahuje názov poľa.
hodnota: Obsahuje hodnotu poľa, čo môže byť objekt typu String alebo Blob.
názov súboru: Obsahuje názov súboru, čo je reťazec obsahujúci názov. Názov sa uloží na server, keď sa objekt blob odovzdá ako 2ndparameter.
Prečo FormData?
Elementy formulára HTML sú vyvinuté spôsobom, ktorý automaticky zachytáva jeho polia a hodnoty. V takýchto scenároch nám rozhranie FormData pomáha odosielať formuláre HTML so súbormi alebo bez nich a ďalšími poľami.
Je to objekt, ktorý obsahuje údaje formulára zadané používateľom.
Nižšie je uvedený konštruktor údajov formulára:
let formData = new FormData([form]);
Objekty FormData môžu byť akceptované ako telo sieťovými metódami, ako je napríklad načítanie. Štandardne sa kóduje a odosiela s typom obsahu: multipart/form-data.
Server to bude považovať za bežné odoslanie formulára.
Poďme pochopiť jednoduchý príklad odoslania FormData.
Odoslanie základných údajov formulára
V nižšie uvedenom formulári posielame na server jednoduchý 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); }; Vo vyššie uvedenom príklade nenastavujeme žiadne backendové API na odosielanie údajov, pretože to presahuje rozsah tohto návodu. Môžeme však skontrolovať užitočné zaťaženie na karte siete a pochopiť, ako funguje rozhranie FormData.
Ak sa teda pozrieme na sieťovú požiadavku v nástroji pre vývojárov, zobrazí sa nižšie uvedené užitočné zaťaženie:
Vo vyššie uvedenej sieťovej požiadavke sa údaje formulára odošlú cez sieť pomocou objektu FormData. Inými spôsobmi musíme zadať viacero metód na získanie údajov z formulára.
Pomocou rozhrania FormData teda môžeme jednoducho odoslať formData na server. Je to len jednoriadkový kód.
FormData Constructor
Konštruktor FormData() sa používa na vytvorenie nového objektu FormData. Môže byť použitý nasledujúcimi spôsobmi:
new FormData() new FormData(form) new FormData(form, submitter)
Parametre:
formulár (voliteľné):
Je to prvok HTML; ak je zadaný, objekt FormData sa vyplní aktuálnymi kľúčmi/hodnotami formulára. Používa vlastnosti atribútu názvu každého prvku pre kľúče a ich odoslanú hodnotu pre hodnoty. Tiež kóduje vstupný obsah súboru.
predkladateľ (voliteľné):
Tlačidlo odosielateľa je prvkom formulára. Ak má prvok odosielateľa vlastnosť atribútu name, jeho údaje budú zahrnuté do objektu FormData.
pridať reťazec
FormData metódy
FormData poskytuje niekoľko metód, ktoré môžu byť užitočné pri prístupe a úprave údajov polí formulára.
V menej prípadoch možno budeme musieť zmeniť údaje formulára pred ich odoslaním na server. Tieto metódy môžu byť v týchto prípadoch užitočné.
Nasleduje niekoľko užitočných metód formData:
formData.append(názov, hodnota)
Prevezme názov a hodnotu dvoch argumentov a pridá objekt poľa formulára so zadaným názvom a hodnotou.
formData.append(názov, blob, názov súboru)
Preberá argumenty name, blob a fileName. Pridá pole na vytvorenie dátových objektov, ak je element HTML , potom tretí argument fileName nastaví názov súboru podľa názvu súboru v súborovom systéme používateľa.
formData.delete(meno)
Vezme názov ako argument a odstráni zadané pole s rovnakým názvom.
formData.get(meno)
Tiež berie názov ako argument a získa hodnotu zadaného poľa s daným názvom.
formData.has(meno)
Tiež berie meno ako argument, skontroluje existenciu poľa s daným názvom a vráti true, ak existuje; inak falošné.
Formulár môže mať viacero polí s rovnakým názvom, takže na pridanie všetkých polí s rovnakým názvom musíme zadať viacero metód pripojenia.
Polia s rovnakým názvom však spôsobia chyby a skomplikujú ich nastavenie v databáze. FormData teda poskytuje inú metódu s rovnakou syntaxou ako append, ale odstráni všetky polia s daným názvom a potom pripojí nové pole. Zabezpečuje teda, že bude existovať jedinečný kľúč s názvom.
t flip flop
formData.set(name, value) formData.set(name, blob, fileName)
V metóde set funguje syntax ako metóda append.
Ako iterovať FormData?
FormData poskytuje metódu FormData.entries() na iteráciu cez všetky jej kľúče. Táto metóda vráti iterátor, ktorý iteruje cez všetky položky kľúč/hodnota vo FormData. Kľúč je objekt typu reťazec, zatiaľ čo hodnota môže byť buď blob alebo reťazec.
Zvážte nasledujúci príklad:
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]}`); } Výstupom vyššie uvedeného príkladu bude:
key1, value1 key2, value2
Odoslanie formulára so súborom údajov
Súbory je možné odoslať aj pomocou FormData. Súbory fungujú na prvku formulára a odosiela sa ako Content-Type: multipart/form-data. Kódovanie multipart/form-data umožňuje odosielanie súborov. Štandardne je teda súčasťou údajov formulára. Súbory môžeme odoslať na server s kódovaním údajov formulára.
Zvážte nasledujúci príklad:
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(); }; Vo vyššie uvedenom príklade je objekt obrázku odoslaný v binárnom formáte pomocou FormData. Môžeme si to pozrieť na karte siete vývojárskeho nástroja:
Odosielanie údajov formulára ako objektu Blob
Odoslanie údajov formulára ako objektu blob je jednoduchý spôsob, ako odoslať dynamicky generované binárne údaje. Môže to byť akýkoľvek obrázok alebo škvrna; môžeme ho poslať priamo na server tak, že ho odošleme v tele načítania.
Je vhodné odosielať obrazové údaje a iné formulárové údaje, ako je meno, heslo atď. Servery sú tiež priateľskejšie na to, aby prijímali viacdielne zakódované formuláre namiesto binárnych údajov.
Zvážte príklad nižšie, ktorý odosiela obrázok spolu s ostatnými údajmi formulára ako formulár.
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); } Vo vyššie uvedenom príklade vidíme, že sa obrázok blob pridáva takto:
formData.append('image', imageBlob, 'image.webp');
Čo je to isté ako , a používateľ odoslal súbor s názvom 'image.webp' s určitými údajmi imageBlob zo systému súborov. Server ich prečíta ako údaje normálneho formulára.