So lesen Sie Dateien in JS

Wie lesen wir Dateien im Browser in JavaScript? Ich werde es Ihnen im Artikel ausführlich erläutern. Ich hoffe, dass es für alle hilfreich ist.

Da die Web-API in JavaScript über eine neue Datei-API-Methode verfügt, ist es für uns bequemer, Dateien zu lesen und Daten im Browser zu verarbeiten, ohne einen Back-End-Server zu verwenden.

FileReader liest Daten aus einer Datei und speichert sie in einer JavaScript-Variablen. Beide laden Daten von einer externen Ressource und der Lesevorgang erfolgt nicht verstopft. Es gibt verschiedene Methoden für Lesevorgänge, wie zum Beispiel die folgenden Methoden

(1) readAsText() – gibt den Dateiinhalt in Form von Klartext zurück

The The Mit der Methode readAsText() können Textdateien gelesen werden. Diese Methode hat zwei Parameter. Der erste Parameter ist das zu lesende Datei- oder Blob-Objekt. Der zweite Parameter wird verwendet, um die Kodierung der Datei anzugeben. Der zweite Parameter ist optional. Wenn nicht angegeben, wird standardmäßig UTF-8 als Codierung verwendet. In den Einstellungen müssen Sie einen Ereignis-Listener festlegen, nachdem die Datei geladen wurde. Wenn das Onload-Ereignis aufgerufen wird, können wir den Inhalt der Datei überprüfen, die über das Ergebnisattribut FileReader erhalten wird.

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

(2) readAsArrayBuffer()-Methode

Diese Methode liest einen Blob oder ein File-Objekt und generiert einen ArrayBuffer . Wenn der Lesevorgang abgeschlossen ist, ändert sich der Status „readyState“ in „done“ (abgeschlossen) und das Ereignis „loadend“ wird ausgelöst. Gleichzeitig enthält das Ergebnisattribut ein ArrayBuffer-Objekt zur Darstellung der Daten der gelesenen Datei Datenpuffer. Beim Bearbeiten von Dateien, beispielsweise beim Konvertieren von JPEG-Bildern in PNG

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

(3) gibt readAsDataURL() den Dateiinhalt in Form einer Daten-URL zurück

Diese Methode akzeptiert eine Datei oder einen Blob, um eine Daten-URL zu generieren, bei der es sich im Grunde um eine Base64-codierte Zeichenfolge von Dateidaten handelt. Diese Daten-URL kann zum Festlegen von src-Bildattributen verwendet werden

Wenn Sie die oben genannten drei Methoden verwenden, müssen Sie das Ladeereignis abhören, bevor Sie mit dem Lesen beginnen, und event.target.result gibt das Ergebnis des Lesens zurück.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo lesen Sie Dateien in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!