Hvordan jobbe med filer i JavaScript ved hjelp av FileReader API | Forklart med eksempler

Filleser -API gir filleser object som kan brukes til å lese filer fra din lokale maskin og bruke dataene på websiden din. Du kan til og med bruke den til å lese en fil fra klientens lokale maskin og deretter overføre dataene til serveren.

Å lese en fil og lese dens data kan gjøres på flere måter, men noen ganger er det best å bruke objektet \ api som støttes av nesten alle nettleserne. Det er grunnen til at FileReader API er et av de mest brukte objektene med Vanilla JavaScript for å lese innholdet i en fil.

Filleserobjekt

For å opprette en ny filleserobjekt må du først ringe FileReader () Konstruktør ved hjelp av "ny" nøkkelord. Etter det kan du begynne å bruke de forskjellige funksjonene til dette objektet. For å lære mer om denne konstruktøren kan du besøke de offisielle dokumentene av MDN ved å klikke her.

Fillesermetoder

Filleserobjektet kommer med mange forskjellige metoder som hjelper oss med å analysere dataene til filen som vi leser. Noen av metodene utføres automatisk av nettleserne og kalles for eksempel hendelsesbehandlermetoder, for eksempel "på Last()" Metoden blir automatisk påkalt når filleseren er ferdig med å lese innholdet i filen.

For å få tilgang til metodene til filleserobjektet bruker du en dot-operator “ .”. Noen av metodene og variablene som kan nås ved å bruke filleserobjektet er ::

• gjenstand. Resultat: Brukes til å få innholdet i filen som ble lest
• gjenstand.Readastext: Les innholdet i filen og analyserer dem som en tekst
• gjenstand.ABORT: Avbryter den nåværende leseoperasjonen

Og mye mer som kan leses på deres offisielle dokumentasjons webside.

Fillesereksempel

For å demonstrere bruken av filleser -API -en, trenger vi en HTML -webside med et inndatafelt i type = ”fil”, Vi kan opprette dette ved hjelp av følgende linje i HTML -filen:

Dette vil gi oss følgende webside:

Merk: Vi brukte ikke noe ID- eller klasseattributt i inngangsfeltet, da vi refererer til vårt inngangsfelt ved hjelp av spørringsvelgeren.

For JavaScript -koden er det første vi skal gjøre å velge inndatafeltet ved å bruke spørringsvelgeren:

const input = dokument.querySelector ('input [type = "fil"]');

Neste gang skal vi legge til en hendelseslytter av "endring" på vår variabel inngang, Det vil ringe en funksjon for å laste inn innholdet i filen ved å bruke følgende linje:

inngang.AddEventListener ("Endring", funksjon (e)
, falsk);

Denne funksjonshendelseslytteren vil utføre hver gang Inngangskode Laster inn en fil, vi kan få tilgang til filen ved hjelp av “Input.fil" Array. For å vise detaljene i den lastede filen kan vi bruke følgende linje:

konsoll.logg (input.filer [0])

Vi får følgende utgang på konsollen vår:

Inne i funksjonen skal vi opprette vårt filleserobjekt ved å bruke linjen:

const Reader = new FileReader ();

Filen som jeg vil lese er en tekstfil, så her skal jeg bruke metoden Readastext av filleseren objekterer å analysere innholdet i filene som tekstdata ved å bruke følgende linjer:

leser.Readastext (input.filer [0]);

Nå kan vi få tilgang til innholdet i filen vi leser og analysert ved å bruke leser.resultat. De på Last() Metoden kalles automatisk når filleserobjektet er ferdig med å lese filen, slik at vi kan vise innholdet i filen når den er ferdig med å lese ved å bruke følgende kommandoer:

leser.onload = funksjon ()
konsoll.Logg (leser.resultat);
;

Det komplette kodebiten er:

const input = dokument.querySelector ('input [type = "fil"]');
inngang.AddEventListener (
"endring",
funksjon (e)
konsoll.logg (input.filer [0]);
const Reader = new FileReader ();
leser.Readastext (input.filer [0]);
leser.onload = funksjon ()
konsoll.Logg (leser.resultat);
;
,
falsk
);

Kjør filen og velg en tekstfil på din lokale maskin som denne:

Du vil observere følgende resultat på konsollen din:

Og der du går, har du lest innholdet i filen og skrevet dem ut på konsollen.

Arbeider med et bilde

For å lese et bilde og for å vise det på konsollen må du først lese filen med Readasdataurl Bruke følgende linje:

leser.ReadasDataurl (input.filer [0]);

Og for å vise bildet på websiden din må du opprette en ny bildevariabel inne i på Last() Funksjon ved hjelp av følgende linjer:

leser.onload = funksjon ()
const img = nytt bilde ();
;
,

Og så inne i dette på Last Funksjon, du kommer til å angi kilden til bildevariabelen som vi opprettet lik resultatet av filleserobjektet:

img.SRC = leser.resultat;

Og sist skal vi legge til denne bildevariabelen til dokumentet ved å bruke følgende linje:

dokument.kropp.appendchild (img);

Det komplette kodebiten er:

const input = dokument.querySelector ('input [type = "fil"]');
inngang.AddEventListener (
"endring",
funksjon (e)
konsoll.logg (input.filer [0]);
const Reader = newFileReader ();
leser.ReadasDataurl (input.filer [0]);
leser.onload = funksjon ()
constimg = nytt bilde ();
img.SRC = leser.resultat;
dokument.kropp.appendchild (img);
;
,
falsk
);

Når du kjører filen, vil du ha følgende utdata:

Og der går du, nå vet du hvordan du skal jobbe med filleser -API for å lese filer på din lokale maskin

Konklusjon

File Reader API kommer som et innebygd API med Vanilla JavaScript og støttes av nesten alle nettlesere. Denne filleseren API returnerer oss et filleserobjekt som vi kan bruke for å lese innholdet i filen ved å velge analyseringsmetoden. I dette innlegget lærte vi om File Reader API, File Reader -objektet og hvordan du bruker filleserobjektet til å lese tekstfiler samt bildefiler. Vi viste til og med bildet i nettleseren ved å legge det inn i dokumentet.