JavaScript Academy · Oppitunti

Tiedostojen lukeminen FileReaderilla

Lukekaa valitut tiedostot tekstinä tai data-URL-osoitteina.

Oppitunti 2/413 vaihetta

Tiedostojen lukeminen FileReaderilla on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä FileReader on

FileReader on selainrajapinta, joka lukee File- ja Blob-objektien sisällön asynkronisesti. Tiedosto saadaan <input type="file">-elementistä, ja se voidaan lukea tekstiksi, data-URL-osoitteeksi tai binaarimuotoon.

Tiedoston hakeminen syötekentästä

Tiedostosyötekenttä tarjoaa files-listan. Ensimmäinen valittu tiedosto on indeksissä 0, ja sillä on hyödyllisiä ominaisuuksia, kuten name, size ja type.

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

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

Lukeminen on asynkronista

FileReader ei palauta tietoja suoraan. Liittäkää siihen onload-käsittelijä ja kutsukaa sitten lukumetodia. Tulos saadaan myöhemmin kohteesta reader.result.

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

readAsText

readAsText purkaa tiedoston tekstimerkkijonoksi. Se sopii erityisesti .txt-, .csv- ja JSON-tiedostoille.

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

readAsDataURL

readAsDataURL tuottaa base64-koodatun data:-URL-osoitteen. Se sopii erinomaisesti kuvan esikatseluun, kun arvo määritetään img.src-ominaisuudelle.

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 antaa binaaridatan raakana ArrayBuffer-objektina. Se on hyödyllinen tiedostomuotojen jäsentämisessä tavu kerrallaan.

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

Virheiden käsittely

Liittäkää onerror-käsittelijä lukemisen epäonnistumisten käsittelemiseksi, esimerkiksi kun tiedostoa ei voi lukea.

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

Edistymisen seuraaminen

Suurten tiedostojen kohdalla onprogress-tapahtuma ilmoittaa, kuinka monta tavua on siihen mennessä ladattu. Tätä voidaan käyttää edistymispalkkeihin.

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

Promiseen kääriminen

Tapahtumapohjainen rajapinta on hankala käyttää. Kääritkää se Promiseen, jotta voitte käyttää await-avainsanaa ja kirjoittaa selkeämpää koodia.

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

Moderni vaihtoehto: file.text()

Moderneissa selaimissa voitte kutsua suoraan metodeja file.text(), file.arrayBuffer() tai file.stream(), jotka palauttavat Promisen. Ne ovat monissa tilanteissa yksinkertaisempia kuin FileReader.

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

show(file);

Miksi FileReader on tärkeä

FileReaderin avulla voitte käsitellä käyttäjän valitsemia tiedostoja kokonaan selaimessa: esikatsella kuvia, jäsentää CSV-tiedostoja tai tarkistaa lähetettävät tiedostot ennen lähettämistä. Valitkaa lukumetodi tarvitsemienne tietojen mukaan: teksti, data-URL-osoite tai binaaridata. Seuraavaksi tutustutte Blobeihin ja objektin URL-osoitteisiin.

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

Pikainen tarkistus

Millä FileReader-metodilla saatte kuvan esikatselun src-ominaisuudelle sopivan base64-merkkijonon?

Vastaa interaktiivisessa oppitunnissa

Kertaus: tiedostojen lukeminen

Opitte lukemaan tiedostojen sisältöä:

Tiedostot haetaan kohteesta input.files, ja lukeminen tapahtuu asynkronisesti onload-käsittelijän avulla.
readAsText, readAsDataURL ja readAsArrayBuffer palauttavat tietoja eri muodoissa.
Vikasietoisuutta voi parantaa käsittelemällä tapahtumat onerror ja onprogress.
Modernit file.text()- ja file.arrayBuffer()-metodit ovat Promise-pohjaisia vaihtoehtoja.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tiedostojen lukeminen FileReaderilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tiedostojen lukeminen FileReaderilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tiedostojen lukeminen FileReaderilla”?

Lukekaa valitut tiedostot tekstinä tai data-URL-osoitteina. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Tiedostojen lukeminen FileReaderilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy