`FileReader` în JavaScript

Fișiere și criptografie Toate browserele

Citește conținutul unui fișier ales de utilizator: ca text, ca adresă data: sau ca octeți.

Sintaxă

const cititor = new FileReader();
cititor.onload = () => cititor.result;
cititor.readAsText(fisier)
cititor.readAsDataURL(fisier)
cititor.readAsArrayBuffer(fisier)

Ce face `FileReader`

FileReader este API-ul mai vechi, bazat pe evenimente, pentru citirea fișierelor. Pornești citirea cu una dintre metode, iar rezultatul apare în cititor.result la evenimentul load.

readAsText(fisier, codificare) dă textul, readAsDataURL o adresă data:tip;base64,... (bună pentru previzualizarea imaginilor), iar readAsArrayBuffer octeții. În cod nou, metodele Blob cu promisiuni (await fisier.text()) sunt mai simple.

Parametri

Parametru	Descriere
`fisier`	Un `File` sau `Blob`.
`codificare`	Opțional, la readAsText. Implicit UTF-8.

Ce returnează

Metodele nu returnează nimic; rezultatul vine în result, la evenimentul load.

Exemple

Exemplul 1: Citirea unui fișier CSV ales

<input type="file" id="fisier" accept=".csv">

<script>
  document.querySelector("#fisier").addEventListener("change", (e) => {
    const cititor = new FileReader();
    cititor.addEventListener("load", () => {
      const randuri = cititor.result.trim().split("\n");
      console.log(`${randuri.length} rânduri; antet: ${randuri[0]}`);
    });
    cititor.readAsText(e.target.files[0]);
  });
</script>

Rezultat în browser

3 rânduri; antet: nume,oras

Exemplul 2: O imagine ca adresă data:

const cititor = new FileReader();
cititor.onload = () => {
  console.log(cititor.result.slice(0, 40) + "...");
  document.querySelector("img").src = cititor.result;
};
cititor.readAsDataURL(fisierImagine);