JavaScript Academy · leksjon

Lese filer med FileReader

Les valgte filer som tekst eller data-URL-er.

Leksjon 2 av 413 trinn

Lese filer med FileReader er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er FileReader?

FileReader er et nettleser-API som leser innholdet i File- og Blob-objekter asynkront. Du får en fil fra et <input type="file"> og leser den inn som tekst, en data-URL eller binærdata.

Hente en fil fra et input-felt

Et filinndatafelt tilbyr en files-liste. Den første valgte filen ligger på indeks 0 og har nyttige egenskaper som name, size og type.

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

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

Lesing er asynkron

FileReader returnerer ikke data direkte. Knytt en onload-behandler til objektet, og kall deretter en lesemetode. Resultatet kommer senere i reader.result.

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

readAsText

readAsText dekoder filen som en tekststreng, noe som passer godt for .txt-, .csv- eller JSON-filer.

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

readAsDataURL

readAsDataURL lager en base64-data:-URL. Dette passer perfekt for å forhåndsvise et bilde ved å tilordne URL-en til 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 gir rå binærdata som en ArrayBuffer, noe som er nyttig når filformater skal analyseres byte for 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);

Håndtere feil

Knytt en onerror-behandler til objektet for å fange opp lese feil, for eksempel når en fil ikke kan leses.

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

Følge med på fremdriften

For store filer rapporterer onprogress-hendelsen hvor mange byte som er lastet inn så langt. Dette er nyttig for fremdriftsindikatorer.

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

Pakke inn i et Promise

Den hendelsesbaserte API-en er tungvint. Pakk den inn i et Promise, slik at du kan bruke await og få ryddigere kode.

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

Moderne alternativ: file.text()

Moderne nettlesere lar deg kalle file.text(), file.arrayBuffer() eller file.stream() direkte. Disse returnerer Promises og er enklere enn FileReader i mange tilfeller.

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

show(file);

Hvorfor FileReader er viktig

FileReader lar deg behandle filer som brukeren har valgt, helt i nettleseren: forhåndsvise bilder, analysere CSV-filer eller validere opplastinger før de sendes. Velg lesemetode ut fra hvilke data du trenger: tekst, data-URL eller binærdata. Deretter skal du utforske Blobs og objekt-URL-er.

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

Kontrollspørsmål

Hvilken FileReader-metode gir deg en base64-streng som passer til et bildes src for forhåndsvisning?

Besvar den i den interaktive leksjonen

Oppsummering: Lese filer

Du har lært å lese filinnhold:

Hent filer fra input.files; lesingen skjer asynkront via onload.
readAsText, readAsDataURL og readAsArrayBuffer returnerer ulike formater.
Håndter onerror og onprogress for å gjøre koden robust.
De moderne file.text()- og file.arrayBuffer()-metodene er Promise-baserte alternativer.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Lese filer med FileReader» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Lese filer med FileReader», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Lese filer med FileReader»?

Les valgte filer som tekst eller data-URL-er. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Lese filer med FileReader»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy