JavaScript Academy · Lezione

Leggere file con FileReader

Legga i file selezionati come testo o URL di dati.

Leggere file con FileReader è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 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'è FileReader?

FileReader è un'API del browser che legge in modo asincrono il contenuto degli oggetti File e Blob. È possibile ottenere un file da un elemento <input type="file"> e leggerlo come testo, URL di dati o dati binari.

Ottenere un file da un input

Un input per i file espone un elenco files. Il primo file selezionato si trova all'indice 0 e presenta proprietà utili come name, size e type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

La lettura è asincrona

FileReader non restituisce direttamente i dati. Colleghi un gestore onload, quindi chiami un metodo di lettura. Il risultato sarà disponibile in seguito in reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText decodifica il file come stringa di testo, ideale per file .txt, .csv o JSON.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL produce un URL data: in base64. È perfetto per visualizzare in anteprima un'immagine assegnandolo a img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer restituisce i dati binari grezzi come ArrayBuffer, utile per analizzare i formati dei file byte per byte.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Gestione degli errori

Colleghi un gestore onerror per intercettare gli errori di lettura, ad esempio quando un file non è leggibile.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Monitoraggio dell'avanzamento

Per i file di grandi dimensioni, l'evento onprogress indica quanti byte sono stati caricati finora, risultando utile per le barre di avanzamento.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Incapsulamento in una Promise

L'API basata sugli eventi può risultare macchinosa. La avvolga in una Promise per poter usare await e ottenere un codice più chiaro.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Alternativa moderna: file.text()

I browser moderni consentono di chiamare direttamente file.text(), file.arrayBuffer() o file.stream(), che restituiscono Promise. In molti casi sono più semplici da usare rispetto a FileReader.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Perché FileReader è importante

FileReader consente di elaborare interamente nel browser i file selezionati dall'utente: visualizzare immagini in anteprima, analizzare file CSV o convalidare i caricamenti prima dell'invio. Scelga il metodo di lettura in base ai dati necessari: testo, URL di dati o dati binari. Ora esplorerà i Blob e gli URL oggetto.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Verifica rapida

Quale metodo di FileReader restituisce una stringa in base64 adatta alla proprietà src dell'anteprima di un'immagine?

Riepilogo: lettura dei file

Ha imparato a leggere il contenuto dei file:

Ottenga i file da input.files; la lettura è asincrona tramite onload.
readAsText, readAsDataURL e readAsArrayBuffer restituiscono formati diversi.
Gestisca onerror e onprogress per una maggiore robustezza.
I metodi moderni file.text() e file.arrayBuffer() sono alternative basate su Promise.

Domande Frequenti

La lezione «Leggere file con FileReader» è gratuita?

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

Legga i file selezionati come testo o URL di dati. 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 2 di 4.

Quanto tempo richiede la lezione «Leggere file con FileReader»?

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