JavaScript Academy · Lezione

L'oggetto FormData

Costruisca payload multipart dai moduli.

L'oggetto FormData è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è FormData?

FormData è un'API del browser per creare un insieme di coppie chiave/valore che rappresentano i campi di un modulo e i relativi valori. È il modo standard per impacchettare i dati, inclusi i file, da inviare a un server.

La codifica utilizzata è multipart/form-data, che supporta il caricamento di dati binari.

Creazione di un FormData vuoto

Crei un oggetto FormData vuoto e aggiunga i campi uno alla volta con append.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Creazione a partire da un elemento form

Passi un elemento <form> al costruttore: ogni input con un nome viene acquisito automaticamente. È l'utilizzo più comune.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append e set

append aggiunge un valore anche se la chiave esiste già, consentendo più valori per la stessa chiave. set sostituisce tutti i valori esistenti per quella chiave.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Lettura dei valori

get restituisce il primo valore associato a una chiave, getAll restituisce tutti i valori sotto forma di array e has ne verifica l'esistenza.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Eliminazione dei campi

delete rimuove tutti i valori associati a una chiave. È utile per eliminare alcuni campi prima dell'invio.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Iterazione delle voci

FormData è iterabile. Utilizzi entries, keys o values, oppure un ciclo for...of, per scorrere tutte le coppie.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Aggiunta di file

append può ricevere un File o un Blob come valore. Un terzo argomento facoltativo imposta il nome del file inviato al server.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Perché multipart/form-data

FormData viene serializzato come multipart/form-data e può contenere sia campi di testo sia il contenuto binario dei file all'interno dello stesso corpo della richiesta. Per questo è il formato preferito per il caricamento dei file.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

Conversione in un oggetto

Per i moduli che contengono solo testo, Object.fromEntries può trasformare FormData in un normale oggetto. Tenga presente che, in caso di chiavi ripetute, viene mantenuto un solo valore.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Perché FormData è importante

FormData fa da ponte tra i moduli HTML e le richieste di rete. Raccoglie campi e file, supporta le chiavi ripetute e codifica i dati binari in modo sicuro. Ora leggerà il contenuto dei file con FileReader, quindi invierà FormData con fetch.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Verifica rapida

Qual è la differenza tra append e set su un oggetto FormData?

Riepilogo: l'oggetto FormData

Ha imparato a impacchettare i dati dei moduli:

new FormData(form) acquisisce automaticamente gli input con un nome.
append consente chiavi ripetute; set le sostituisce.
Legga i valori con get, getAll e has; esegua l'iterazione con entries.
La codifica utilizzata è multipart/form-data, che supporta file e dati binari.

Domande Frequenti

La lezione «L'oggetto FormData» è gratuita?

Sì — il testo completo di «L'oggetto FormData» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «L'oggetto FormData»?

Costruisca payload multipart dai moduli. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «L'oggetto FormData»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy