So arbeiten Sie mit Dateien in JavaScript mit FileReader API | Mit Beispielen erklärt
Wenn Sie eine Datei lesen und ihre Daten lesen. Aus diesem Grund ist die FileReader -API eines der am häufigsten verwendeten Objekte von Vanille JavaScript zum Lesen des Inhalts einer Datei.
Dateileserobjekt
So erstellen Sie ein neues Dateileserobjekt, das Sie zum ersten Mal aufrufen müssen FileReader () Konstruktor mit dem "neu" Stichwort. Danach können Sie mit den verschiedenen Funktionen dieses Objekts beginnen. Um mehr über diesen Konstruktor zu erfahren, können Sie die offiziellen Dokumente des MDN besuchen, indem Sie hier klicken.
Dateilesermethoden
Das Dateileserobjekt wird mit vielen verschiedenen Methoden geliefert, mit denen wir die Daten der von uns gelesenen Datei analysieren können. Einige der Methoden werden automatisch von den Browsern ausgeführt und werden beispielsweise die Event -Handler -Methoden bezeichnet "Onload ()" Die Methode wird automatisch aufgerufen, sobald der Dateileser fertig ist, den Inhalt der Datei zu lesen.
Um auf die Methoden des Dateileserobjekts zuzugreifen, verwenden Sie a Dot-Operator “ .”. Einige der Methoden und Variablen, auf die mithilfe des Dateileserobjekts zugegriffen werden kann, sind ::
- Objekt. Ergebnis: Wird verwendet, um den Inhalt der gelesenen Datei zu erhalten
- Objekt.Readastext: liest den Inhalt der Datei und analysiert sie als Text
- Objekt.Abort: Abtreiben Sie den aktuellen Lesevorgang
Und noch viel mehr, um auf der Webseite ihrer offiziellen Dokumentation zu lesen.
Beispiel für Dateileser
Um die Verwendung der Dateileser -API zu demonstrieren, benötigen wir eine HTML -Webseite mit einem Eingabefeld der type = "Datei", Wir können diese mit der folgenden Zeile in der HTML -Datei erstellen:
Dies gibt uns die folgende Webseite:
Notiz: Wir haben kein ID oder Klassenattribut im Eingabefeld verwendet.
Für den JavaScript -Code wird das erste, was wir tun werden, das Eingabefeld mit dem Abfragetektor auswählen:
const input = dokument.querySelector ('input [type = "file"]');Als nächstes werden wir einen Event -Hörer hinzufügen "ändern" auf unserer Variablen Eingang, Dadurch wird eine Funktion aufgerufen, um den Inhalt der Datei mithilfe der folgenden Zeile zu laden:
Eingang.AddEventListener ("Change", Funktion (e), FALSCH);
Dieser Funktionsereignishörer wird jedes Mal ausgeführt, wenn die Eingabetikett Laden Sie eine Datei, wir können die Datei mit der Datei zugreifen "Eingang.Datei" Array. Um die Details der geladenen Datei anzuzeigen, können wir die folgende Zeile verwenden:
Konsole.Protokoll (Eingabe.Dateien [0])Wir erhalten die folgende Ausgabe auf unserer Konsole:
In der Funktion erstellen wir unser Dateileserobjekt mit der Zeile:
const reader = new fileReader ();Die Datei, die ich lesen möchte, ist eine Textdatei. Hier werde ich die Methode verwenden Readastext des Dateileser -Objekts, um den Inhalt der Dateien als Textdaten mit den folgenden Zeilen zu analysieren:
Leser.Readastext (Eingabe.Dateien [0]);Jetzt können wir auf den Inhalt der von uns gelesenen und analysierten Datei zugreifen, indem wir die verwenden Leser.Ergebnis. Der Onload () Die Methode wird automatisch aufgerufen, wenn das Dateileserobjekt gelesen wird, das die Datei gelesen hat, sodass wir den Inhalt der Datei nach dem Lesen mit den folgenden Befehlen angezeigt werden können:
Leser.onload = function ()Konsole.Protokoll (Leser.Ergebnis);
;
Der komplette Code -Snippet lautet:
const input = dokument.querySelector ('input [type = "file"]');Eingang.AddEventListener (
"ändern",
Funktion (e)
Konsole.Protokoll (Eingabe.Dateien [0]);
const reader = new fileReader ();
Leser.Readastext (Eingabe.Dateien [0]);
Leser.onload = function ()
Konsole.Protokoll (Leser.Ergebnis);
;
,
FALSCH
);
Führen Sie die Datei aus und wählen Sie eine Textdatei auf Ihrem lokalen Computer wie folgt aus:
Sie werden das folgende Ergebnis auf Ihrer Konsole beobachten:
Und da Sie gehen, haben Sie den Inhalt der Datei gelesen und auf die Konsole gedruckt.
Arbeiten mit einem Bild
So lesen Sie ein Bild und um es auf der Konsole anzuzeigen, müssen Sie die Datei zuerst mit der Lesen ReadasDataurl Verwenden der folgenden Zeile:
Leser.ReadasDataurl (Eingabe.Dateien [0]);Und um das Bild auf Ihrer Webseite anzuzeigen, müssen Sie eine neue Bildvariable in der erstellen Onload () Funktion unter Verwendung der folgenden Zeilen:
Leser.onload = function ()const img = new Image ();
;
,
Und dann drinnen Onload Funktion, Sie werden die Quelle der Bildvariablen festlegen, die wir gleich dem Ergebnis des Dateileserobjekts erstellt haben:
img.src = reader.Ergebnis;Und zuletzt werden wir diese Bildvariable mit der folgenden Zeile an das Dokument anhängen:
dokumentieren.Körper.appendChild (IMG);Der komplette Code -Snippet lautet:
const input = dokument.querySelector ('input [type = "file"]');Eingang.AddEventListener (
"ändern",
Funktion (e)
Konsole.Protokoll (Eingabe.Dateien [0]);
const reader = newFileArader ();
Leser.ReadasDataurl (Eingabe.Dateien [0]);
Leser.onload = function ()
constimg = new Image ();
img.src = reader.Ergebnis;
dokumentieren.Körper.appendChild (IMG);
;
,
FALSCH
);
Wenn Sie die Datei ausführen, haben Sie die folgende Ausgabe:
Und da gehen Sie, jetzt wissen Sie, wie Sie mit der Dateileser -API arbeiten, um Dateien auf Ihrem lokalen Computer zu lesen
Abschluss
Die Dateileser-API wird als integrierte API mit Vanille-JavaScript ausgestattet und wird von fast allen Webbrowsern unterstützt. Diese Dateileser -API gibt uns ein Dateileser -Objekt zurück, mit dem wir den Inhalt der Datei durch auswählen können, indem wir die Parsing -Methode auswählen. In diesem Beitrag haben wir die Dateileser -API, das Dateileserobjekt und die Verwendung des Dateileserobjekts zum Lesen von Textdateien sowie Bilddateien erfahren. Wir haben das Bild sogar im Webbrowser angezeigt, indem wir es in das Dokument angemeldet haben.