De JavaScript FormData-interface biedt een methode om een ​​object te maken met sleutel-waardeparen. Deze objecten kunnen via internet worden gedeeld met behulp van de methode fetch() of XMLHttpRequest.send(). Het maakt gebruik van de functionaliteit van het HTML-formulierelement. Het zal hetzelfde formaat gebruiken dat zal worden gebruikt door een formulier waarvan het coderingstype is ingesteld op 'multipart/form-data'.

We kunnen het ook rechtstreeks doorgeven aan de URLSearchParams-constructor om de queryparameters op te halen, net als in het taggedrag bij het indienen van een GET-verzoek.

Over het algemeen wordt het gebruikt om een ​​dataset te maken die naar de server wordt verzonden. Het FormData-object is een array van arrays die voor elk element één array bevat.

Deze arrays hebben de volgende drie waarden:

naam: Het bevat de naam van het veld.

waarde: Het bevat de waarde van het veld, die een String- of Blob-object kan zijn.

bestandsnaam: Het bevat de bestandsnaam, een tekenreeks die de naam bevat. De naam wordt op de server opgeslagen wanneer een blob-object wordt doorgegeven als de 2^nlparameter.

Waarom FormData?

De HTML-formulierelementen zijn zo ontwikkeld dat de velden en waarden ervan automatisch worden vastgelegd. In dergelijke scenario's helpt de FormData-interface ons bij het verzenden van HTML-formulieren met of zonder bestanden en extra velden.

Het is een object dat de formuliergegevens bevat die door de gebruiker zijn ingevoerd.

Hieronder vindt u de formuliergegevensconstructor:

 let formData = new FormData([form]); 

De FormData-objecten kunnen als lichaam worden geaccepteerd door netwerkmethoden zoals fetch. Het wordt standaard gecodeerd en verzonden met het Content-Type: multipart/form-data.

De server beschouwt het als een normale formulierinzending.

Laten we een eenvoudig voorbeeld bekijken van het verzenden van FormData.

Een basisformuliergegevens verzenden

In het onderstaande formulier sturen we een eenvoudige FormData naar de server.

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

In het bovenstaande voorbeeld hebben we geen backend-API opgezet voor het verzenden van de gegevens, omdat dit buiten het bestek van deze tutorial valt. Maar we kunnen de payload naar het netwerktabblad controleren en begrijpen hoe de FormData-interface werkt.

Dus als we naar het netwerkverzoek in de ontwikkelaarstool kijken, wordt de onderstaande payload weergegeven:

In het bovenstaande netwerkverzoek worden de formuliergegevens via het netwerk verzonden met behulp van het FormData-object. Op andere manieren moeten we meerdere methoden specificeren om de gegevens uit het formulier te halen.

Met behulp van de FormData-interface kunnen we de formData dus eenvoudig naar de server sturen. Het is slechts een onelinercode.

FormData-constructor

De FormData()-constructor wordt gebruikt om een ​​nieuw FormData-object te maken. Het kan op de volgende manieren worden gebruikt:

 new FormData() new FormData(form) new FormData(form, submitter) 

Parameters:

formulier (optioneel):

Het is een HTML-element; Als dit is opgegeven, wordt het FormData-object gevuld met de huidige sleutels/waarden van het formulier. Het gebruikt de naamattribuuteigenschappen van elk element voor de sleutels en hun ingediende waarde voor de waarden. Het codeert ook de inhoud van bestandsinvoer.

indiener (optioneel):

De indienerknop is een onderdeel van een formulier. Als het indienerelement een naamattribuuteigenschap heeft, worden de gegevens ervan opgenomen in het FormData-object.

singleton-ontwerp

FormData-methoden

FormData biedt verschillende methoden die nuttig kunnen zijn bij het verkrijgen van toegang tot en het wijzigen van de formulierveldgegevens.

In minder gevallen is het mogelijk dat we de formuliergegevens moeten wijzigen voordat we deze naar de server verzenden. Deze methoden kunnen in deze gevallen nuttig zijn.

Hieronder volgen enkele nuttige formData-methoden:

formData.append(naam, waarde)

Het neemt de naam en de waarde van twee argumenten en voegt een formulierveldobject toe met de opgegeven naam en waarde.

formData.append(naam, blob, bestandsnaam)

Er zijn de argumenten naam, blob en bestandsnaam nodig. Het voegt een veld toe om gegevensobjecten te vormen als het HTML-element is, waarna het derde argument fileName de bestandsnaam instelt volgens de bestandsnaam in het bestandssysteem van de gebruiker.

formData.delete(naam)

Het neemt een naam als argument en verwijdert het opgegeven veld met dezelfde naam.

formulierData.get(naam)

Het neemt ook een naam als argument en haalt de waarde van het opgegeven veld op met de opgegeven naam.

formulierData.has(naam)

Het neemt ook de naam als argument, controleert het bestaan ​​van het veld met de opgegeven naam en retourneert true als het bestaat; anders vals.

Een formulier kan meerdere velden met dezelfde naam hebben, dus we moeten meerdere toevoegmethoden opgeven om al die velden met dezelfde naam toe te voegen.

Maar velden met dezelfde naam veroorzaken fouten en creëren complexiteit bij het instellen ervan in de database. FormData biedt dus een andere methode met dezelfde syntaxis als append, maar verwijdert alle velden met de opgegeven naam en voegt vervolgens een nieuw veld toe. Het zorgt er dus voor dat er een unieke sleutel met een naam ontstaat.

 formData.set(name, value) formData.set(name, blob, fileName) 

In de set-methode werkt de syntaxis als de append-methode.

Hoe FormData herhalen?

FormData biedt een methode FormData.entries() om al zijn sleutels te doorlopen. Deze methode retourneert een iterator die alle sleutel-/waarde-items in FormData doorloopt. Een sleutel is een stringobject, terwijl de waarde een blob of een string kan zijn.

Beschouw het onderstaande voorbeeld:

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

De uitvoer van het bovenstaande voorbeeld is:

 key1, value1 key2, value2 

Een formulier verzenden met een gegevensbestand

De bestanden kunnen ook via FormData worden verzonden. De bestanden werken op het formulierelement en het wordt verzonden als Content-Type: multipart/form-data. De meerdelige/formuliergegevenscodering maakt het verzenden van bestanden mogelijk. Het maakt dus standaard deel uit van de formuliergegevens. We kunnen de bestanden naar de server sturen met de formuliergegevenscodering.

Beschouw het onderstaande voorbeeld:

gedeeltelijke afhankelijkheid

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

In het bovenstaande voorbeeld wordt het afbeeldingsobject in binair formaat verzonden met behulp van FormData. We kunnen het bekijken op het netwerktabblad van de ontwikkelaarstool:

Formuliergegevens verzenden als een Blob-object

Het verzenden van formuliergegevens als een blob-object is een eenvoudige manier om de dynamisch gegenereerde binaire gegevens te verzenden. Het kan elk beeld of elke klodder zijn; we kunnen het rechtstreeks naar de server sturen door het in de fetch-body door te geven.

Het is handig om afbeeldingsgegevens en andere formuliergegevens zoals naam, wachtwoord, enz. te verzenden. Ook zijn de servers vriendelijker om uit meerdere delen gecodeerde formulieren te accepteren in plaats van binaire gegevens.

Bekijk het onderstaande voorbeeld, waarbij de afbeelding samen met de andere formuliergegevens als formulier wordt verzonden.

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

In het bovenstaande voorbeeld zien we dat de afbeeldingsblob als volgt is toegevoegd:

 formData.append('image', imageBlob, 'image.webp'); 

Dat is hetzelfde als een , en de gebruiker heeft een bestand ingediend met de naam 'image.webp' met een aantal gegevens imageBlob uit het bestandssysteem. De server leest het als normale gegevens.