js verwendet FileReader zum Lesen lokaler Dateien oder Blobs

js verwendet FileReader zum Lesen lokaler Dateien oder Blobs

FileReader liest lokale Dateien oder Blobs

Das FileReader-Objekt ermöglicht das asynchrone Lesen des Inhalts von Dateien, die auf dem Computer des Benutzers gespeichert sind. Verwenden Sie das File- oder Blob-Objekt, um die zu lesende Datei oder Daten anzugeben. Die FileReader-Schnittstelle bietet Methoden zum Lesen von Dateien und ein Ereignismodell, das die Leseergebnisse enthält.

1. Verwendung von FileReader

Hinweis: Wenn die Kompatibilität mit älteren Browsern gewährleistet sein muss, ist zu prüfen, ob das FileReader-Objekt vorhanden ist.

wenn (Fenster.FileReader) {
 : Der Reader kann nicht mit anderen Dateien verbunden werden.
} anders {
 console.log('Ihr Browser unterstützt das Lesen von Dateien nicht');
}

2. FileReader-Methoden

Verfahren Wirkung Parameter Rückgabewert
abbrechen() Lesevorgang abbrechen keiner keiner
readAsArrayBuffer() Lesen von Datei- und Blob-Inhalten Datei/Blob Die Eigenschaft result gibt den Dateiinhalt des ArrayBuffer-Datenobjekts zurück.
readAsBinaryString()[veraltet von W3] Lesen von Datei- und Blob-Inhalten Datei/Blob Die Eigenschaft result gibt den Dateiinhalt der ursprünglichen Binärdaten zurück.
readAsDataURL() Lesen von Datei- und Blob-Inhalten Datei/Blob

Das Ergebnisattribut gibt den Dateiinhalt im Base64-Zeichenfolgenformat data:URL zurück.

readAsText() Lesen von Datei- und Blob-Inhalten Datei/Blob Die Eigenschaft result gibt den Dateiinhalt als Zeichenfolge zurück

3. FileReader-Eigenschaften

  • FileReader.error (schreibgeschützt): Eine Ausnahme, die einen Fehler anzeigt, der beim Lesen einer Datei aufgetreten ist
  • FileReader.readyState (schreibgeschützt): Eine Zahl, die den Status des FileReaders darstellt
Wert Statusname beschreiben
0 LEER Keine Daten geladen
1 LADEN Daten werden geladen
2 ERLEDIGT

Daten werden geladen

  • FileReader.result (schreibgeschützt): Der Inhalt der Datei wird gelesen. Diese Eigenschaft ist erst gültig, nachdem die Daten gelesen wurden. Das Format des Dateiinhalts wird durch die Lesemethode bestimmt.

4. FileReader-Ereignisse

  • FileReader.onabort : Dieses Ereignis wird ausgelöst, wenn der Lesevorgang abgebrochen wird.
  • FileReader.onerror : Dieses Ereignis wird ausgelöst, wenn beim Lesen ein Fehler auftritt.
  • FileReader.onload : Dieses Ereignis wird ausgelöst, wenn der Lesevorgang abgeschlossen ist.
  • FileReader.onloadstart : Dieses Ereignis wird ausgelöst, wenn der Lesevorgang gerade beginnt.
  • FileReader.onloadend : Dieses Ereignis wird ausgelöst, wenn der Lesevorgang abgeschlossen ist (es wird sowohl bei einem Fehler als auch bei einem Erfolg ausgelöst).
  • FileReader.onprogress : Dieses Ereignis wird beim Lesen ausgelöst.

Beachten:

1. Aus Sicherheitsgründen liest FileReader per Eingabe übergebene oder vom Ajax-Leseserver zurückgegebene Dateien und kann keine Dateien im angegebenen Pfad lesen.

2. FileReader kann im Webworker verwendet werden.

<!DOCTYPE html>
<html Klasse="no-js">
	<Kopf>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-kompatibel" content="IE=edge" />
		<Titel></Titel>
		<meta name="Beschreibung" Inhalt="" />
		<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1" />
		<link rel="stylesheet" href="" />
	</Kopf>
 
	<Text>
		<input type="file" id="meineDatei" />
		<Skripttyp="text/javascript">
			wenn (Fenster.FileReader) {
				var reader = neuer FileReader();
			} anders {
				console.log('Ihr Browser unterstützt das Lesen von Dateien nicht');
			}
			var meineDatei = document.querySelector('#meineDatei');
			meineDatei.onchange = Funktion () {
				var Datei = meineDatei.Dateien[0];
				reader.readAsDataURL(Datei);
				Leser.onload = Funktion () {
					var data = reader.result; //Dateiinhalt im Base64-Format };
                Leser.beiFehler = Funktion(){
                    console.log('Lesen fehlgeschlagen');
                    Konsole.log(Leser.Fehler);
                }
			};
		</Skript>
	</body>
</html>

Probleme bei der Verwendung von FileReader zum Lesen lokaler Festplattendateien

Führen Sie eine JS-Datei aus (legen Sie die JS-Datei unter die Quelle des Projekts).

(1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
(3)FileReader fileReader = neuer FileReader(url.getPath());

Laufzeit

Erscheint: Ausnahme im Thread „main“ java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (Das System kann den angegebenen Pfad nicht finden)

Wenn ich url.getPath() in "D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js" mein lokales Dateiverzeichnis ändere, kann ich die Datei erfolgreich lesen

Der Wert von url.getPath() ist: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js Aber die Ladedatei kann nicht gefunden werden

Das Problem ist „%20“. Zwischen Eclipse WorkSpace steht ein Leerzeichen, das System ersetzt es automatisch durch %20, was während des Betriebs zu einem Fehler führt.

Führen Sie einige Verarbeitungen an url.getPath() durch und ersetzen Sie %20 durch " " Leerzeichen durch url.getPath().substring(1).replace("%20", " "); das Problem ist gelöst

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Das könnte Sie auch interessieren:
  • Wie erhält man den vollständigen Pfad der Dateisteuerung in js?
  • JavaScript kombiniert mit fileReader zum Hochladen von Bildern
  • Detaillierte Erklärung zu Javascript-Dateien und Blobs
  • Konvertierung zwischen Datei-, Bolb- und Base64-Bildern beim JS-Bildupload

<<:  Beispiel für eine adaptive CSS-Bildschirmgrößenimplementierung

>>:  So verwenden Sie crontab, um MySQL-Datenbanken regelmäßig im Linux-System zu sichern

Artikel empfehlen

Detaillierte Beschreibung des Lebenszyklus von React-Komponenten

Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....

MySql-Freigabe der Nullfunktionsnutzung

Funktionen zu Null in MySql IFNULL ISNULL NULLIF ...

Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

Inhaltsverzeichnis Überblick Hash-Eigenschaften G...

Lösungen für Probleme bei der Leistungsoptimierung von MySQL-Indizes

Die von MySQL erstellte Optimierung besteht im Hi...

Installations-Tutorial für die komprimierte Version von MySQL 5.7.18 Archiv

In diesem Artikel wird die spezifische Methode zu...

HTML-Lernhinweise – Detaillierte Erklärung der HTML-Syntax (unbedingt lesen)

1. Was ist die HTML-Auszeichnungssprache? HTML is...

Fortgeschrittenes Front-End, das Ihnen die Verwendung der Javascript-Speicherfunktion beibringt

Inhaltsverzeichnis Vorwort Hintergrund Umsetzungs...

Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

Ich erstelle schon lange Websites, habe aber immer...

Analyse des neuen Ressourcenmanagementsystems von CocosCreator

Inhaltsverzeichnis 1. Ressourcen und Konstruktion...

Details zu MySQL-Zeittypen und -Modi

Inhaltsverzeichnis 1. MySQL-Zeittyp 2. Überprüfen...

Beispiel für die Implementierung einer eingebetteten Tabelle mit vue+elementUI

Während meines Praktikums im letzten Studienjahr ...

VMware12.0-Installation Ubuntu14.04 LTS-Tutorial

Ich habe verschiedene Images sowohl unter virtuel...

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

1. Laden Sie das Axios-Plugin herunter cnpm insta...

Vue ruft die Computerkamera auf, um die Fotofunktion zu realisieren

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie das JQuery-Editor-Plugin tinyMCE

Ändern Sie die vereinfachte Dateigröße und laden ...