So lesen Sie lokale Dateien in JavaScript

JavaScript ist eine hochrangige Web-Programmiersprache, die Webseiten die Möglichkeit gibt, zu denken und zu handeln. JavaScript bietet Entwicklern die Interaktivität mit Dateien, die im lokalen System des Entwicklers vorhanden sind. Die Interaktivität mit den Dateien kann unterschiedliche Typen sein, z. B. das Hochladen einer Datei auf einen Server oder das Hochladen mit Einschränkungen hochladen.

Es gibt mehrere Möglichkeiten, lokale Dateien in JavaScript zu öffnen und zu lesen -"Fs" API oder mithilfe des HTML -Dateiattributs der Datei auswählen

Tag oder sogar ein externes Paket verwenden und dann seine Methode ausprobieren.

In diesem Beitrag zeigen wir Ihnen also, wie Sie lokale Dateien in JavaScript lesen, indem Sie die verwenden FS API und durch Verwendung

Das HTML -Dateiattribut auswählen.

HTML5 FileReader API

HTML5 führte einen konsistenten Mechanismus ein, um mit lokalen Dateien umzugehen, indem er die eingeführt hat Dateileser -API Spezifikation. Der Dateileser -API Kann verwendet werden, um eine Vorschau auf Fotos vorzulegen, wenn sie auf einen Server übertragen werden und eine Webanwendung ermöglicht, eine Dateireferenz zu speichern, auch wenn der Benutzer nicht mit dem Internet verbunden ist. Verwenden der Ereignishandler von JavaScript und der Dateileser -API können wir asynchron eine Datei lesen.

Der Dateileser API Bietet uns vier integrierte Methoden, mit denen wir Dateien asynchron lesen können. Die erste eingebaute Methode ist die Filerader.ReadasArrayBuffer () Dies liest einen lokalen Dateiinhalt, gibt jedoch einen ArrayBuffer zurück, der den Dateiinhalt enthält. Dann kommt der Filerader.ReadasDataurl () Das gibt eine URL der Daten aus einer lokalen Datei zurück.

Der Filerader.ReadAsBinaryString () Gibt den Inhalt der lokalen Datei in einem String-Format zurück und die am häufigsten verwendete integrierte Methode von FileReader ist die Filerader.Readastext () Das gibt den Inhalt der lokalen Datei in einem Text-Zeichenfolge-Format zurück, oder wir können in einer menschlichen lesbaren Form sagen.

Nachdem wir nun wissen, was FileReader -API ist, lassen Sie uns die HTML -Umgebung für einen Benutzer festlegen, um eine Datei auszuwählen, die der Browser lesen möchte.

HTML -Datei auswählen

HTML ist eine Hypertext -Markup -Sprache, mit der wir unseren Webseiten Struktur verleihen werden. Wir werden HTML verwenden, um den Benutzer eine Datei auszuwählen, und dann verwenden wir JavaScript, um den Inhalt der Datei zu lesen. Der HTML -Code ist unten angegeben:

Im obigen Code haben wir eine initialisiert Eingang Tag mit der Art von Datei und gegeben das Attribut Ausweis mit deren Element in unserer JavaScript -Datei verwiesen wird. Als nächstes haben wir a initialisiert P Tag, in dem unser Inhalt der Datei veröffentlicht wird, sobald der Benutzer eine Datei auswählt. Am Ende benutzen wir die Skript Mit dem SRC -Attribut, in dem wir eine Datei verwiesen haben Code.JS Das enthält unseren JavaScript -Code.

JavaScript -Dateifunktionalität

Wir sind mit HTML fertiggestellt, also gehen wir nun zu JavaScript über, um unseren Zweck zu erreichen, eine Datei in JavaScript zu lesen. Zu diesem Zweck verwenden wir die integrierte Methode der Dateileser-API Readastext (). Der JavaScript -Code ist unten angegeben:

var myfile = document.GetelementById ("myfile");
var FileOutput = Dokument.getElementById ("FileOutput");
meine Datei.AddEventListener ('Change', function ()
var fileReader = new fileReader ();
Filerader.onload = function ()
FileOutput.textContent = fileReader.Ergebnis;

Filerader.Readastext (dies.Dateien [0]);
)

Im obigen Code erhalten wir zunächst die Referenz der Eingabedatei und der P Tag, das wir in der HTML mit ihrem ID -Attribut festlegen. Als nächstes haben wir einen Ereignishörer der Änderung hinzugefügt, sodass die Funktion, die in diesem Ereignishandler vorhanden ist.

In der Ereignishandlerfunktion zuerst haben wir die initialisiert FileReader () Objekt mit dem neuen Schlüsselwort. Dann nach Abschluss der Filerader Funktion Wir veröffentlichen nur das Ergebnis der Datei P Schild.

Am Ende lesen wir die Datei mit Hilfe der integrierten Methode von FileReader, nämlich Readastext () und übergeben ein Argument, um zu erwähnen, dass das Lesen der Datei im ersten Index liegt. Wir tun dies, damit der Benutzer nicht mehrere Dateien auswählt, und selbst wenn er mehrere Dateien ausgewählt hat, liest der FileReader nur die erste Datei darunter.

Lassen Sie uns nun eine Datei auswählen. Zu diesem Zweck habe ich eine geschaffen Text Dokumentieren und schrieb zwei Zeilen in diese Datei. Die Ausgabe des Dateiinhalts ist unten angegeben:

Wählen Sie nun diese Datei von HTML aus und prüfen Sie, ob wir den Dateiinhalt sehen können oder nicht:

Wir haben eine Datei erfolgreich ausgewählt und ihren Inhalt gelesen und diesen Inhalt dann gedruckt.

Abschluss

HTML5 bietet eine FileReader -API, über die wir Dateiinhalte lesen können. Die FileReader -API bietet uns vier erstellte Methoden, mit denen wir eine Datei so lesen können, wie wir es wollen. Der ReadasArrayBuffer () liest eine Datei und gibt einen ArrayBuffer des Dateiinhalts zurück, readasDataurl () liest die Datei und gibt eine URL zurück, die Inhalte der Lesung Datei enthält, readAsBinarystring () Lesen Sie eine Datei und gibt rohe Binärdaten der Lesendatei und zurückgibt Das letzte ist das Readastext () Dies liest eine Datei und gibt den Inhalt der Lesedatei als Textzeichenfolge zurück, der in menschlich lesbarer Form ist.

In diesem Beitrag haben wir besprochen, wie Sie eine lokale Datei in JavaScript lesen, indem Sie zunächst implementieren.