JavaScript Academy · Lektion

Læsning af filer med FileReader

Læs valgte filer som tekst eller data-URL'er.

Lektion 2 af 413 trin

Læsning af filer med FileReader er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er FileReader?

FileReader er en browser-API, der asynkront læser indholdet af File- og Blob-objekter. Du får en fil fra et <input type="file"> og læser den ind som tekst, en data-URL eller binære data.

Hentning af en fil fra et inputfelt

Et filinput stiller en liste med files til rådighed. Den først valgte fil findes på indeks 0 og har nyttige egenskaber 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);

Læsning er asynkron

FileReader returnerer ikke data direkte. Du knytter en onload-håndtering til den og kalder derefter en læsemetode. 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 afkoder filen som en tekststreng, hvilket er ideelt til .txt-, .csv- eller JSON-filer.

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

readAsDataURL

readAsDataURL opretter en base64-data:-URL. Det er perfekt til at forhåndsvise et billede ved at tildele den til et 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 giver rå binære data som en ArrayBuffer, hvilket er nyttigt til at fortolke filformater 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åndtering af fejl

Knyt en onerror-håndtering til for at opfange læsefejl, f.eks. når en fil ikke kan læses.

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

Følge fremdriften

For store filer rapporterer hændelsen onprogress, hvor mange bytes der indtil videre er indlæst, hvilket er nyttigt til fremdriftsbjælker.

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

Indpakning i et Promise

Den hændelsesbaserede API er klodset. Pak den ind i et Promise, så du kan bruge await og få renere 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 browsere lader dig kalde file.text(), file.arrayBuffer() eller file.stream() direkte, og de returnerer Promises. Disse er enklere end FileReader i mange tilfælde.

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

show(file);

Hvorfor FileReader er vigtigt

FileReader lader dig behandle brugervalgte filer helt i browseren: forhåndsvis billeder, fortolk CSV-filer, eller valider filoverførsler, før de sendes. Vælg læsemetoden ud fra de data, du har brug for: tekst, data-URL eller binære data. Nu skal du udforske Blobs og objekt-URL'er.

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

Hurtig test

Hvilken FileReader-metode giver dig en base64-streng, der egner sig til et billedes src ved en forhåndsvisning?

Besvar den i den interaktive lektion

Opsummering: Læsning af filer

Du har lært at læse filindhold:

Hent filer fra input.files; læsningen er asynkron via onload.
readAsText, readAsDataURL og readAsArrayBuffer returnerer forskellige formater.
Håndter onerror og onprogress for at gøre løsningen robust.
De moderne file.text()- og file.arrayBuffer()-metoder er Promise-baserede alternativer.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Læsning af filer med FileReader” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Læsning af filer med FileReader”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Læsning af filer med FileReader”?

Læs valgte filer som tekst eller data-URL'er. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Læsning af filer med FileReader”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy