FormData în JavaScript

const date = new FormData(formular);
date.get(nume)
date.append(nume, valoare)
date.set(nume, valoare)
date.getAll(nume)
date.has(nume)
date.delete(nume)
date.entries()

Ce face FormData

new FormData(formular) citește toate câmpurile unui element <form> după atributul name. Poți porni și de la un FormData gol și să adaugi valori.

append adaugă o valoare (un nume poate avea mai multe, ca la căsuțele bifate), set înlocuiește toate valorile unui nume, get o citește pe prima, getAll pe toate, has și delete verifică și șterg. Obiectul se parcurge cu for...of sau entries().

Dat ca body lui fetch, este trimis ca multipart/form-data, inclusiv fișierele; nu seta manual antetul Content-Type.

Parametri

Parametru	Descriere
formular	Opțional. Un element <form> (doar în browser).

Ce returnează

Un obiect FormData.

Exemple

Exemplul 1: Valori adăugate, citite și parcurse

const date = new FormData();

date.append("nume", "Ana Pop");
date.append("interese", "js");
date.append("interese", "css");
date.set("oras", "Iași");

console.log(date.get("interese"), date.getAll("interese"));
console.log(date.has("oras"));
date.delete("oras");
console.log([...date.entries()]);
console.log(Object.fromEntries(date));

Rezultat

js [ 'js', 'css' ]
true
[ [ 'nume', 'Ana Pop' ], [ 'interese', 'js' ], [ 'interese', 'css' ] ]
{ nume: 'Ana Pop', interese: 'css' }

Exemplul 2: Trimiterea unui formular cu fișier

<form id="profil">
  <input name="nume" value="Ana">
  <input name="avatar" type="file">
  <button>Salvează</button>
</form>

<script>
  document.querySelector("#profil").addEventListener("submit", async (e) => {
    e.preventDefault();
    const date = new FormData(e.target);
    console.log(date.get("nume"), date.get("avatar").name);

    const raspuns = await fetch("/api/profil", { method: "POST", body: date });
    console.log(raspuns.status);
  });
</script>

Rezultat în browser

Ana poza.jpg
200

Greșeli frecvente

• Setezi manual Content-Type: multipart/form-data la fetch. Lipsește parametrul boundary, iar serverul nu poate citi datele; lasă browserul să-l pună.
• Folosești Object.fromEntries(date) pe un formular cu valori multiple pentru același nume. Rămâne doar ultima; folosește getAll.

Comenzi înrudite

• fetch: Trimite o cerere HTTP la un server și primește răspunsul, fără reîncărcarea paginii.
• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.
• Object.fromEntries: Construiește un obiect dintr-o listă de perechi [cheie, valoare]; inversul lui Object.entries.