Come leggere un file di testo locale usando JavaScript?

In JavaScript, sono disponibili più pacchetti e API che consentono all'utente di leggere i dati da un file posizionato localmente. Due delle più famose di queste biblioteche sono

1. Pacchetto file system: consente ai programmi JavaScript di leggere i file dal sistema
2. API FileReaderWeb: consente il lavoro con i file da una pagina Web HTML.

Come puoi vedere, entrambi funzionano in modo diverso; Uno funziona per una pagina web HTML e l'altro per i programmi JavaScript locali.

Pacchetto file system per la lettura di file sul desktop

Il pacchetto file system viene fornito con l'ambiente nodo predefinito per i programmi JavaScript ospitati localmente. Tuttavia, è ancora necessario includere il pacchetto di file system nel codice JavaScript utilizzando la parola chiave richiesta. Dopodiché, la funzione readFile () Incluso in questo pacchetto consente di leggere i dati da un file.

Sintassi del metodo ReadFile ()
La sintassi del metodo readFile () è data come:

Filesystemvar.readFile (pathTotheFile, opzioni, CalbackFunction);

I dettagli di questa sintassi sono come:

• Filesystamvar: Questa è la variabile che è stata impostata uguale richiedere filesystem pacchetto
• PathTotheFile: Questo è il percorso del file che si desidera leggere
• Opzioni: Queste sono le opzioni opzionali in grado di filtrare la codifica e altri attributi del file
• CallbackFunction: Una funzione di callback che verrà eseguita su una lettura riuscita del file

Esempio 1: leggere un file con pacchetto file system

Inizia creando un nuovo file di testo sul tuo computer e posiziona un po 'di testo al suo interno come

Successivamente, vai all'interno del tuo file JavaScript e includi il pacchetto file system utilizzando la parola chiave richiede:

const fs = requisito ("fs");

Quindi usa le seguenti righe:

fs.ReadFile ("Demo.txt ", (err, data) =>
if (err) lancia err;
console.registro (dati.accordare());
);

I seguenti passaggi vengono eseguiti nel codice sopra menzionato:

• Leggi il file "Demo.TXT"
• Se c'è un errore, quindi lanciare quel messaggio di errore sul terminale
• In caso di nessun errore, archiviare i dati letti dal file nel dati variabile
• Stampare il contenuto del dati variabile dopo averlo convertito in stringa usando il accordare() metodo

All'esecuzione del codice, osserverai il seguente output sul tuo terminale:

I dati dal file sono stati stampati sul terminale.

API Web FileReader per la lettura di file su una pagina Web HTML

L'API del lettore file funziona solo con le pagine Web HTML e una delle restrizioni di questa API è che funziona sui file che sono stati letti da <tipo di input = "file"> tag. Ha più funzioni che consentono all'utente di leggere il file in codifica diverse.

Esempio 2: leggere un file di testo locale da una pagina Web HTML

Inizia impostando una pagina Web HTML, per questo utilizzare le seguenti righe:

Otterrai la seguente pagina Web sul tuo browser:

Successivamente, vai al file JavaScript e scrivi le seguenti righe di codice:

documento.getElementById ("InputFileToread")
.addEventListener ("Change", function ()
var fr = new FileReader ();
fr.ReadaStext (questo.files [0]);
fr.onload = function ()
console.registro (fr.risultato);
;
);

I seguenti passaggi vengono eseguiti nel codice sopra menzionato:

• Un ascoltatore di azione viene applicato sul tuo con l'ID "InputFileTotoread"
• Quindi un oggetto di lettore di file (fr) è stato creato utilizzando il costruttore FileReader ()
• Quindi il primo file sul file viene letto come un testo usando il fr variabile
• Dopo aver letto con successo il file che i dati vengono stampati sulla console

Per dimostrarlo, seleziona lo stesso file selezionato nel primo esempio e otterrai il seguente risultato sulla console del browser:

Il risultato mostra che il file è stato letto correttamente dalla pagina web HTML.

Conclusione

Per leggere un file di testo posizionato localmente, abbiamo due opzioni: per caricare il file in HTML o leggere quel file nel programma desktop JavaScript. Per questo, hai API Web del lettore file per pagine Web e un pacchetto di file system per desktop javascript. In sostanza, entrambi eseguono la stessa operazione: leggere un file di testo. In questo tutorial, è stata utilizzata la funzione readfile () dal pacchetto file system e readfileastext () dall'API Web del lettore file.