JavaScript Academy · Lektion

Läsa filer med FileReader

Läs valda filer som text eller data-URL:er.

Lektion 2 av 413 steg

Läsa filer med FileReader är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är FileReader?

FileReader är ett webbläsar-API som asynkront läser innehållet i File- och Blob-objekt. Ni hämtar en fil från ett <input type="file"> och läser in den som text, en data-URL eller binärdata.

Hämta en fil från ett inmatningsfält

Ett filinmatningsfält tillhandahåller en files-lista. Den första valda filen finns på index 0 och har användbara egenskaper som name, size och 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 är asynkron

FileReader returnerar inte data direkt. Koppla en onload-hanterare och anropa sedan en läsmetod. Resultatet kommer senare i reader.result.

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

readAsText

readAsText avkodar filen som en textsträng, vilket passar bra för .txt-, .csv- eller JSON-filer.

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

readAsDataURL

readAsDataURL skapar en base64-data:-URL. Det passar perfekt för att förhandsvisa en bild genom att tilldela den till 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 ger rå binärdata som en ArrayBuffer, vilket är användbart för att tolka filformat byte för 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);

Hantera fel

Koppla en onerror-hanterare för att fånga läsfel, till exempel när en fil inte går att läsa.

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

Följa förloppet

För stora filer rapporterar händelsen onprogress hur många byte som har lästs in hittills, vilket är användbart för förloppsindikatorer.

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

Omsluta i ett Promise

Det händelsebaserade API:t är omständligt. Omslut det i ett Promise så att ni kan använda await och skriva renare kod.

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

Modernt alternativ: file.text()

I moderna webbläsare kan ni anropa file.text(), file.arrayBuffer() eller file.stream() direkt. De returnerar Promise-objekt och är enklare än FileReader i många fall.

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

show(file);

Varför FileReader är viktigt

FileReader låter er bearbeta användarvalda filer helt i webbläsaren: förhandsvisa bilder, tolka CSV-filer eller validera uppladdningar innan de skickas. Välj läsmetod utifrån vilka data ni behöver: text, data-URL eller binärdata. Sedan utforskar ni Blobs och objekt-URL:er.

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

Snabb kontroll

Vilken FileReader-metod ger er en base64-sträng som passar för src vid bildförhandsvisning?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Läsa filer

Ni har lärt er att läsa filinnehåll:

Hämta filer från input.files; läsningen sker asynkront via onload.
readAsText, readAsDataURL och readAsArrayBuffer returnerar olika format.
Hantera onerror och onprogress för bättre robusthet.
Moderna file.text() och file.arrayBuffer() är Promise-baserade alternativ.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Läsa filer med FileReader” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Läsa filer med FileReader”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Läsa filer med FileReader”?

Läs valda filer som text eller data-URL:er. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Läsa filer med FileReader”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy