La interfície JavaScript FormData proporciona un mètode per crear un objecte amb parells clau-valor. Aquests objectes es poden compartir a Internet mitjançant el mètode fetch() o XMLHttpRequest.send(). Utilitza la funcionalitat de l'element de formulari HTML. Utilitzarà el mateix format que utilitzarà un formulari del tipus de codificació que s'estableix en 'multipart/form-data'.

També el podem passar directament al constructor URLSearchParams per obtenir els paràmetres de consulta igual que en el comportament de l'etiqueta a l'enviament de la sol·licitud GET.

Generalment, s'utilitza per crear un conjunt de dades per enviar-lo al servidor. L'objecte FormData és una matriu de matrius que conté una matriu per a cada element.

Aquestes matrius tenen els tres valors següents:

nom: Conté el nom del camp.

valor: Conté el valor del camp, que pot ser un objecte String o Blob.

nom de l'arxiu: Conté el nom del fitxer que és una cadena que conté el nom. El nom es desarà al servidor quan es passi un objecte blob com a 2^ndparàmetre.

Per què FormData?

Els elements del formulari HTML es desenvolupen de manera que captura automàticament els seus camps i valors. En aquests escenaris, la interfície FormData ens ajuda a enviar formularis HTML amb o sense fitxers i camps addicionals.

És un objecte que conté les dades del formulari introduïdes per l'usuari.

A continuació es mostra el constructor de dades del formulari:

 let formData = new FormData([form]); 

Els objectes FormData es poden acceptar com a cos mitjançant mètodes de xarxa com ara fetch. Es codifica i s'envia amb el tipus de contingut: multipart/form-data per defecte.

El servidor ho considerarà com a enviament de formulari normal.

Entendrem un exemple senzill d'enviament de FormData.

Enviament d'un formulari bàsic de dades

Al formulari següent, estem enviant un senzill FormData al servidor.

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

A l'exemple anterior, no configurem cap API de fons per enviar les dades perquè això està fora de l'abast d'aquest tutorial. Però, podem comprovar la càrrega útil a la pestanya de xarxa i podem entendre com funciona la interfície FormData.

Per tant, si mirem la sol·licitud de xarxa a l'eina de desenvolupament, mostrarà la càrrega útil següent:

A la sol·licitud de xarxa anterior, les dades del formulari s'envien a la xarxa mitjançant l'objecte FormData. D'altres maneres, hem d'especificar diversos mètodes per obtenir les dades del formulari.

Així, mitjançant la interfície FormData, podem enviar fàcilment el formData al servidor. És només un codi d'una línia.

Constructor de FormData

El constructor FormData() s'utilitza per crear un nou objecte FormData. Es pot utilitzar de les maneres següents:

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

Paràmetres:

formulari (opcional):

És un element HTML; si s'especifica, l'objecte FormData s'emplenarà amb les claus/valors actuals del formulari. Utilitza les propietats d'atribut de nom de cada element per a les claus i el seu valor enviat per als valors. També codifica el contingut d'entrada del fitxer.

remitent (opcional):

El botó d'enviament és un element d'un formulari. Si l'element remitent té una propietat d'atribut de nom, les seves dades s'inclouran a l'objecte FormData.

jsp javatpoint

Mètodes FormData

FormData ofereix diversos mètodes que poden ser útils per accedir i modificar les dades dels camps del formulari.

En menys casos, és possible que hàgim de canviar les dades del formulari abans d'enviar-los al servidor. Aquests mètodes poden ser útils en aquests casos.

A continuació es mostren alguns mètodes de formData útils:

herència java

formData.append(nom, valor)

Pren el nom i el valor de dos arguments i afegeix un objecte de camp de formulari amb el nom i el valor proporcionats.

formData.append(nom, blob, fileName)

Pren els arguments name, blob i fileName. Afegeix un camp per formar objectes de dades si l'element HTML és , llavors el tercer argument fileName estableix el nom del fitxer segons el nom del fitxer al sistema de fitxers de l'usuari.

formData.delete(nom)

Pren un nom com a argument i elimina el camp especificat que té el mateix nom.

formData.get(nom)

També pren un nom com a argument i obté el valor del camp especificat amb el nom donat.

formData.has(nom)

També pren el nom com a argument, comprova l'existència del camp amb el nom donat i retorna true si existeix; en cas contrari fals.

Un formulari pot tenir diversos camps amb el mateix nom, de manera que hem d'especificar diversos mètodes d'afegir per afegir tots aquests camps amb el mateix nom.

Però els camps amb el mateix nom provocaran errors i crearan complexitat a l'hora de configurar-los a la base de dades. Per tant, el formData proporciona un altre mètode amb la mateixa sintaxi que append, però elimina tots els camps amb el nom donat i després afegeix un camp nou. Així, assegura que hi haurà una clau única amb un nom.

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

En el mètode set, la sintaxi funciona com el mètode append.

Com iterar FormData?

FormData proporciona un mètode FormData.entries() per iterar a través de totes les seves claus. Aquest mètode retorna un iterador que itera a través de totes les entrades de clau/valor del FormData. Una clau és un objecte de cadena, mentre que el valor pot ser un blob o una cadena.

Considereu l'exemple següent:

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

La sortida de l'exemple anterior serà:

 key1, value1 key2, value2 

Enviament d'un formulari amb un fitxer de dades

Els fitxers també es poden enviar mitjançant el FormData. Els fitxers funcionen a l'element del formulari i s'envia com a Tipus de contingut: multipart/form-data. La codificació de dades multipart/formulari permet enviar fitxers. Així, per defecte, és una part de les dades del formulari. Podem enviar els fitxers al servidor amb la codificació de dades de formulari.

Considereu l'exemple següent:

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

A l'exemple anterior, l'objecte d'imatge s'envia en format binari mitjançant FormData. Ho podem buscar a la pestanya xarxa de l'eina de desenvolupament:

Enviament de dades de formulari com a objecte Blob

L'enviament de dades de formulari com a objecte blob és una manera senzilla d'enviar les dades binàries generades dinàmicament. Podria ser qualsevol imatge o taca; el podem enviar directament al servidor passant-lo al cos de la recuperació.

És convenient enviar dades d'imatge i altres dades de formulari, com ara el nom, la contrasenya, etc. A més, els servidors són més amigables per acceptar formularis codificats en diverses parts en lloc de dades binàries.

Considereu l'exemple següent, que envia la imatge juntament amb les altres dades del formulari com a formulari.

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

A l'exemple anterior, podem veure que el blob d'imatge s'afegeix de la següent manera:

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

El que és el mateix que un , i l'usuari ha enviat un fitxer amb el nom 'image.webp' amb algunes dades imageBlob del sistema de fitxers. El servidor ho llegirà com a dades de forma normal.