JavaScript Academy · Lezione

Caricare file con Fetch

Invii file a un server con FormData.

Caricare file con Fetch è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Caricamento con fetch

Per inviare file a un server, esegua una richiesta POST con un corpo FormData usando fetch. Il browser gestisce automaticamente la codifica multipart/form-data, incluso il contenuto dei file.

Creazione del FormData

Raccolga il file da un input e lo aggiunga, insieme agli altri eventuali campi, a un oggetto FormData.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

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

La POST di base

Passi FormData come body di una richiesta POST effettuata con fetch. La risposta è una Promise che può attendere con await.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Non imposti Content-Type

Un errore comune consiste nell'impostare manualmente Content-Type. Lasci che lo imposti il browser, perché deve includere la stringa boundary del multipart. Se lo imposta manualmente, il caricamento non funzionerà.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

Lettura della risposta

Verifichi response.ok e analizzi il corpo, spesso in formato JSON, dopo un caricamento riuscito.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

Gestione degli errori

Inserisca la chiamata in un blocco try/catch. Tenga presente che fetch rifiuta la Promise solo in caso di errori di rete, quindi deve verificare response.ok per individuare gli stati HTTP di errore.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

Caricamento di più file

Aggiunga diversi file con la stessa chiave usando append, oppure esegua un ciclo sull'elenco dei file per aggiungerli tutti.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

Aggiunta di intestazioni come Auth

Può aggiungere intestazioni come Authorization, ma non Content-Type. Il corpo rimane FormData.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

Invio di un Blob generato

Può caricare dati creati nel browser, non solo file selezionati. Aggiunga un Blob con un nome file per inviare un documento generato.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

Annullamento di un caricamento

Utilizzi un AbortController per annullare un caricamento lento, ad esempio quando l'utente cambia pagina.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

Perché è importante

La combinazione di FormData e fetch è il modo moderno e standard per caricare file: aggiunga campi e file, invii FormData con una richiesta POST e lasci che il browser codifichi il multipart con il boundary corretto. Eviti di impostare Content-Type, verifichi sempre response.ok e liberi le risorse al termine.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

Verifica rapida

Perché NON dovrebbe impostare manualmente l'intestazione Content-Type quando invia una richiesta POST con FormData tramite fetch?

Riepilogo: caricamento di file con fetch

Ha imparato a inviare file a un server:

Aggiunga file e campi a un FormData, quindi lo passi come body di fetch.
Non imposti mai manualmente Content-Type; il browser aggiunge il boundary del multipart.
Verifichi response.ok, perché fetch rifiuta la Promise solo in caso di errori di rete.
Può inviare più file e Blob generati e annullare i caricamenti con AbortController.

Domande Frequenti

La lezione «Caricare file con Fetch» è gratuita?

Sì — il testo completo di «Caricare file con Fetch» è 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 «Caricare file con Fetch»?

Invii file a un server con FormData. 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 4 di 4.

Quanto tempo richiede la lezione «Caricare file con Fetch»?

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