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

Optimieren Sie die Speichereffizienz von BLOB- und TEXT-Spalten in InnoDB-Tabellen

Lassen Sie uns zunächst einige wichtige Punkte zu...

Mehrere Möglichkeiten zum Ändern des MySQL-Passworts

Vorwort: Bei der täglichen Verwendung der Datenba...

Stapelweises Ersetzen eines Teils der Daten eines Felds in MySQL (empfohlen)

Stapelweises Ersetzen eines Teils der Daten eines...

Docker führt einen Befehl in einem Container außerhalb des Containers aus

Manchmal möchten wir einen Befehl in einem Contai...

Warum ist der MySQL-Autoinkrement-Primärschlüssel nicht kontinuierlich?

Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

HTML5 fügt weitere semantische Tags hinzu, wie et...

So überwachen Sie die Linux-Speichernutzung mit einem Bash-Skript

Vorwort Auf dem Markt sind zahlreiche Open-Source...

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Vorwort JavaScript unterscheidet sich von anderen...

Problem „Nicht genügend Speicher“ und Lösung, wenn Docker Elasticsearch startet

Frage Nicht genügend Speicher, wenn Docker Elasti...

So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird

1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...

Einführung in MySQL-Rollenfunktionen

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann

Beschreibung Lösung Der Bridge-Modus der virtuell...

Implementierung der CommonJS-Modularität in Browsern ohne Kompilierung/Server

Inhaltsverzeichnis Einführung 1. Was ist one-clic...

Eine schnelle Lösung für das Problem der PC- und Mobilanpassung

Beim Erstellen einer Webseite müssen wir normaler...

Beispielcode für HTML-Framesets

Dieser Artikel stellt ein möglichst einfaches Fra...