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

Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung

Vue-Komponenten sind verbunden, daher ist es unve...

MySQL-Tutorial: Datendefinitionssprache (DDL), Beispiel, ausführliche Erklärung

Inhaltsverzeichnis 1. Einführung in die Grundfunk...

So gestalten Sie die Homepage von Tudou.com

<br />Ich arbeite seit mehreren Jahren im Fr...

So lösen Sie das Phantomleseproblem in MySQL

Inhaltsverzeichnis Vorwort 1. Was ist Phantomlese...

Warum die Tabellendateigröße nach dem Löschen von Daten in MySQL unverändert bleibt

Bei Datenbanken, die schon lange laufen, besteht ...

Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)

Die unten zusammengefassten Wissenspunkte werden ...

Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images

Hintergrund Verwenden Sie Idea mit Docker, um den...

Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript-Makrotasks und Mikrotasks

Inhaltsverzeichnis 1. JavaScript ist Single-Threa...

MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode

MySQL-Sequenz AUTO_INCREMENT ausführliche Erkläru...

So erstellen Sie eine Baidu-Totlink-Datei

Baidu definiert zwei Arten von toten Linkformaten:...

Implementierungsmethode für die Kapselung von Vue3-Navigationsleistenkomponenten

Kapseln Sie eine Navigationsleistenkomponente in ...

Docker ermöglicht mehrere Port-Mapping-Befehle

wie folgt: docker run -d -p 5000:23 -p 5001:22 --...

Einführung in den Swap-Speicher des Linux-Systems

Swap-Speicher ist heutzutage ein gängiger Aspekt ...

Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

Beschreibung des Phänomens: Das Projekt verwendet...

Grundlegende MySQL-Tabellenabfragen – häufige Fehler beim Left-Join

Überblick Bei kleinen und mittelgroßen Projekten ...