Hvordan lese lokale filer i JavaScript

JavaScript er et nettprogrammeringsspråk på høyt nivå som gir websider muligheten til å tenke og handle. JavaScript tilbyr utviklere interaktivitet med filer som er til stede på utviklerens lokale system. Interaktivitet med filene kan være av forskjellige typer, for eksempel å laste opp en fil til en server eller laste den opp med begrensninger.

Det er flere måter å åpne og lese lokale filer i JavaScript, hvor vanligste er å bruke det innebygde filsystemet/Promises API -“FS” API, eller ved å bruke HTML -velgfilattributtet til

Tag, eller til og med bruke en ekstern pakke og deretter prøve metoden.

Så i dette innlegget vil vi vise deg hvordan du kan lese lokale filer i JavaScript ved å bruke FS API og ved å bruke

HTML -valgfilattributtet.

HTML5 FileReader API

HTML5 introduserte en konsekvent mekanisme for å håndtere lokale filer ved å introdusere Filleser API Spesifikasjon. De Filleser API Kan brukes til å gi forhåndsvisning av miniatyrbilder når de overføres til en server i tillegg til å la en webapplikasjon lagre en filreferanse selv om brukeren ikke er koblet til Internett. Ved hjelp av hendelsesbehandlerne av JavaScript og File Reader API kan vi asynkront lese en fil.

Filleseren Api tilbyr oss fire innebygde metoder som vi kan bruke til å lese filer asynkront. Den første innebygde metoden er FILEREADER.ReadasArrayBuffer () som leser et lokalt filinnhold, men returnerer en ArrayBuffer som har filinnholdet. Så kommer FILEREADER.readasdataurl () som returnerer en URL av dataene fra en lokal fil.

De FILEREADER.ReadasbinaryString () Returnerer innholdet i den lokale filen i et strengformat, og den mest brukte innebygde metoden til FileReader er FILEREADER.ReadASTEXT () som returnerer innholdet i den lokale filen i et tekststrengformat, eller vi kan si i en menneskelig lesbar form.

Nå som vi vet hva FileReader API er, la oss angi HTML -miljøet for at en bruker skal velge en fil som han/hun vil at nettleseren skal lese.

Html velg fil

HTML er et hypertext -markeringsspråk som brukes til å gi struktur til websidene våre. Vi vil bruke HTML for å få brukeren til å velge en fil, og så bruker vi JavaScript for å lese filens innhold. HTML -koden er gitt nedenfor:

I koden ovenfor har vi initialisert en inngang Tag med typen av fil og gitt attributtet id som vil bli brukt til å referere til dette elementet i vår JavaScript -fil. Deretter har vi initialisert en p Tag der innholdet i filen blir lagt ut når brukeren velger en fil. Til slutt bruker vi manus med SRC -attributtet der vi har referert til en fil kode.JS som vil inneholde vår JavaScript -kode.

JavaScript Les filfunksjonalitet

Vi er ferdige med HTML, så la oss nå gå videre til JavaScript for å oppnå vårt formål å lese en fil i JavaScript. For dette formålet vil vi bruke File Reader API innebygd metode ReadASTEXT (). JavaScript -koden er gitt nedenfor:

var myfile = dokument.getElementById ("myfile");
var fileutput = dokument.getElementById ("FileOutput");
myfile.AddEventListener ('endring', funksjon ()
var filereader = new FileReader ();
FILEREADER.onload = funksjon ()
FileOutput.TextContent = FileReader.resultat;

FILEREADER.Readastext (dette.filer [0]);
)

I koden ovenfor, først får vi referansen til inndatafilen og p Tag vi satte i HTML ved hjelp av ID -attributtet. Deretter har vi lagt til en hendelseslytter av endring, slik at når en bruker velger en fil eller velger en fil, vil funksjonen som er til stede i denne hendelsesbehandleren begynne å utføre.

Inne i hendelsesbehandlerfunksjonen først, initialiserte vi FileReader () objekt med det nye nøkkelordet. Da etter fullført FILEREADER funksjon vi bare legger ut resultatet av filen som er lest i fileutputvariabelen som faktisk er p stikkord.

Til slutt leser vi filen ved hjelp av den innebygde metoden til FileReader som er ReadASTEXT () og gi et argument for å nevne å lese filen som er på den første indeksen. Vi gjør dette slik at brukeren ikke velger flere filer, og selv om han valgte flere filer, vil FileReader bare lese den første filen blant dem.

La oss nå velge en fil. For det formålet har jeg laget en tekst dokumentere og skrev to linjer i den filen. Utgangen fra filinnholdet er gitt nedenfor:

La oss nå velge denne filen fra HTML og se om vi kan se filinnholdet eller ikke:

Vi har valgt en fil og lest innholdet og trykket deretter innholdet.

Konklusjon

HTML5 gir et FileReader API som vi kan lese filinnhold. FileReader API gir oss fire bygde metoder som vi kan bruke til å lese en fil slik vi ønsker. ReadAsArrayBuffer () leser en fil og returnerer en ArrayBuffer av filinnholdet, ReadAsDataurl () leser filen og returnerer en URL som har innholdet i lesefilen, ReadasBinaryString () Les en fil og returnerer rå binære data fra lesefilen og Den siste er den ReadASTEXT () som leser en fil og returnerer innholdet i lesefilen som en tekststreng som er i menneskelig lesbar form.

I dette innlegget diskuterte vi hvordan du kan lese en lokal fil i JavaScript ved først å implementere hvordan du velger en lokal fil ved hjelp av HTML, og deretter når vi velger den filen, leser vi filinnholdet ved hjelp av JavaScript.