Hvordan lese en lokal tekstfil ved hjelp av JavaScript?

I JavaScript er flere pakker og API -er tilgjengelige som lar brukeren lese data fra en lokalt plassert fil. To av de mest kjente av disse bibliotekene er

1. Filsystempakke: lar JavaScript -programmer lese filer fra systemet
2. FileReaderWeb API: Tillater arbeidet med filer fra en HTML -webside.

Som du kan se, fungerer begge annerledes; Den ene fungerer for en HTML -webside og den andre for lokale JavaScript -programmer.

Filsystempakke for å lese filer på skrivebordet ditt

Filsystempakken kommer med standardknute -miljøet for lokalt hostede JavaScript -programmer. Imidlertid må du fortsatt ta med filsystempakken i JavaScript -koden din ved å bruke det nødvendige nøkkelordet. Etter det, funksjonen ReadFile () Inkludert i denne pakken lar deg lese data fra en fil.

Syntaks av ReadFile () -metode
Syntaksen til ReadFile () -metoden er gitt som:

FilesystemVar.ReadFile (Pathtothefile, Alternativer, tilbakeringing Funksjon);

Detaljene i denne syntaksen er som:

• Filesystamvar: Dette er variabelen som er satt lik krever filsystem pakke
• PATHTOTHEFILE: Dette er veien til filen du vil lese
• Alternativer: Dette er de valgfrie alternativene som kan filtrere koding og andre attributter til filen
• CallbackFunction: En tilbakeringingsfunksjon som vil bli utført etter en vellykket lesning av filen

Eksempel 1: Les en fil med filsystempakke

Start med å lage en ny tekstfil på datamaskinen din og legg litt tekst inni den som

Etter det kan du gå inn i JavaScript -filen og ta med filsystempakken ved å bruke nøkkelordet:

const fs = krever ("fs");

Bruk deretter følgende linjer:

fs.ReadFile ("Demo.txt ", (feil, data) =>
hvis (feil) kast feil;
konsoll.Logg (data.toString ());
);

Følgende trinn blir utført i koden nevnt over:

• Les filen “demo.tekst”
• Hvis det er en feil, må du kaste den feilmeldingen på terminalen
• I tilfelle av ingen feil, lagrer dataene som er lest fra filen i data variabel
• Skriv ut innholdet i data variabel etter å ha konvertert den til streng ved hjelp av toString () metode

Ved utførelse av koden vil du observere følgende utdata på terminalen din:

Dataene fra filen er skrevet ut på terminalen.

FileReader Web API for å lese filer på en HTML -webside

File Reader API fungerer bare med HTML -websider, og en av begrensningene i dette API er at den fungerer på filene som er lest av <Inngangstype = “Fil”> Tag. Den har flere funksjoner som lar brukeren lese filen i forskjellige kodinger.

Eksempel 2: Lese en lokal tekstfil fra en HTML -webside

Begynn med å sette opp en HTML -webside, for den bruker følgende linjer:

Du får følgende webside i nettleseren din:

Etter det, gå over til JavaScript -filen og skriv ned følgende kodelinjer:

dokument.getElementById ("inputFileToread")
.AddEventListener ("Endring", funksjon ()
var fr = new FileReader ();
fr.Readastext (dette.filer [0]);
fr.onload = funksjon ()
konsoll.Logg (fr.resultat);
;
);

Følgende trinn blir utført i koden nevnt over:

• En handlingslytter blir brukt på din med ID “inputfiletoread”
• Deretter et objekt med filleser (FR) er opprettet ved hjelp av FileReader () konstruktøren
• Så den første filen på blir lest som en tekst ved hjelp av fr variabel
• Ved vellykket lesing av filen at data skrives ut på konsollen

For å demonstrere dette, velg den samme filen som ble valgt i det første eksemplet, og du får følgende resultat på konsollen til nettleseren din:

Resultatet viser at filen har blitt lest av HTML -siden.

Konklusjon

For å lese en lokalt plassert tekstfil, har vi to alternativer: for å laste inn filen i HTML eller for å lese den filen i Desktop JavaScript -programmet. For dette har du File Reader Web API for websider og en filsystempakke for Desktop JavaScript. I hovedsak utfører begge disse den samme operasjonen: å lese en tekstfil. I denne opplæringen har du brukt ReadFile () -funksjonen fra filsystempakken og ReadFileASTExt () fra File Reader Web API.