So lesen Sie eine lokale Textdatei mit JavaScript?

In JavaScript sind mehrere Pakete und APIs verfügbar, mit denen der Benutzer Daten aus einer lokal platzierten Datei lesen kann. Zwei der berühmtesten dieser Bibliotheken sind

1. Dateisystempaket: Ermöglicht JavaScript -Programmen, Dateien aus dem System zu lesen
2. FileReaderWeb API: Ermöglicht die Arbeit mit Dateien von einer HTML -Webseite.

Wie Sie sehen können, arbeiten beide anders; Einer arbeitet für eine HTML -Webseite und die andere für lokale JavaScript -Programme.

Dateisystempaket zum Lesen von Dateien auf Ihrem Desktop

Das Dateisystempaket wird mit der Standard -Knotenumgebung für lokal gehostete JavaScript -Programme geliefert. Sie müssen das Dateisystempaket jedoch weiterhin mit dem erforderlichen Keyword in Ihren JavaScript -Code einbeziehen. Danach die Funktion ReadFile () In diesem Paket enthalten Sie Daten aus einer Datei lesen.

Syntax der ReadFile () -Methode
Die Syntax der ReadFile () -Methode ist angegeben als:

Dateisystem.ReadFile (Pathtothefile, Optionen, CallbackFunction);

Die Details dieser Syntax sind als:

• DateiSystamvar: Dies ist die Variable, die gleich eingestellt wurde benötigen Dateisystem Paket
• Pathtothefil: Dies ist der Weg zur Datei, die Sie lesen möchten
• Optionen: Dies sind die optionalen Optionen, die Codierung und andere Attribute der Datei filtern können
• Callbackfunktion: Eine Rückruffunktion, die bei einer erfolgreichen Lektüre der Datei ausgeführt wird

Beispiel 1: Lesen einer Datei mit Dateisystempaket

Erstellen Sie mit zunächst eine neue Textdatei auf Ihrem Computer und platzieren Sie einen Text in sie wie wie

Gehen Sie anschließend in Ihre JavaScript -Datei und geben Sie das Dateisystempaket mit dem Keyword für das Erfordernis ein:

const fs = erfordern ("fs");

Verwenden Sie dann die folgenden Zeilen:

fs.ReadFile ("Demo.txt ", (err, data) =>
Wenn (err) erröste;
Konsole.Logdaten.tostring ());
);

Die folgenden Schritte werden in dem oben genannten Code durchgeführt:

• Lesen Sie die Datei “Demo.txt”
• Wenn ein Fehler vorliegt, werfen Sie diese Fehlermeldung auf das Terminal
• Speichern Sie bei keinem Fehler die von der Datei gelesenen Daten in der Datei Daten Variable
• Drucken Sie den Inhalt des Daten Variable nach dem Konvertieren in die Zeichenfolge mit dem tostring () Methode

Bei der Ausführung des Codes beobachten Sie die folgende Ausgabe an Ihrem Terminal:

Die Daten aus der Datei wurden auf das Terminal gedruckt.

FileReader -Web -API zum Lesen von Dateien auf einer HTML -Webseite

Die Dateileser -API funktioniert nur mit HTML -Webseiten, und eine der Einschränkungen dieser API ist, dass sie auf den Dateien funktioniert, die von gelesen wurden, von <Eingabetyp = "Datei"> Tag. Es verfügt über mehrere Funktionen, mit denen der Benutzer die Datei in verschiedenen Codierungen lesen kann.

Beispiel 2: Lesen einer lokalen Textdatei von einer HTML -Webseite

Stellen Sie mit der Einrichtung einer HTML -Webseite, um die folgenden Zeilen zu verwenden:

Sie erhalten die folgende Webseite auf Ihrem Browser:

Gehen Sie danach zur JavaScript -Datei und schreiben Sie die folgenden Codezeilen auf:

dokumentieren.getElementById ("InputFileToread")
.AddEventListener ("Change", function ()
var fr = neuer fileReader ();
fr.Readastext (dies.Dateien [0]);
fr.onload = function ()
Konsole.log (fr.Ergebnis);
;
);

Die folgenden Schritte werden in dem oben genannten Code durchgeführt:

• Ein Action -Hörer wird auf Ihre angewendet mit der ID “InputFileToread”
• Dann ein Objekt des Dateileser (FR) wurde mit dem FileReader () -Konstruktor erstellt
• Dann die erste Datei auf der wird als Text mit dem gelesen fr Variable
• Nach erfolgreichem Lesen der Datei, dass Daten auf die Konsole gedruckt werden

Um dies zu demonstrieren, wählen Sie dieselbe Datei, die im ersten Beispiel ausgewählt wurde, und Sie erhalten das folgende Ergebnis in der Konsole Ihres Browsers:

Das Ergebnis zeigt, dass die Datei von der HTML -Webseite erfolgreich gelesen wurde.

Abschluss

Um eine lokal platzierte Textdatei zu lesen, haben wir zwei Optionen: So laden Sie die Datei in HTML oder lesen Sie diese Datei in Ihrem Desktop JavaScript -Programm. Hierzu verfügen Sie über die Web -API von Dateileser für Webseiten und ein Dateisystempaket für Desktop JavaScript. Beide führen im Wesentlichen dieselbe Operation aus: Lesen einer Textdatei. In diesem Tutorial haben Sie die Funktion readFile () aus dem Dateisystempaket und ReadFileTetext () aus der Dateileser -Web -API verwendet.