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

JavaScript CSS3 zur Implementierung einer einfachen Video-Sperrfunktion

In diesem Artikel wird versucht, eine Demo zur Si...

MySQL 8.0.15 Installations-Tutorial für Windows 64-Bit

Gehen Sie zunächst zum Herunterladen auf die offi...

Installation von Docker CE auf Ubuntu

Dieser Artikel dient zur Aufzeichnung der Install...

MySQL und MySQL Workbench Installations-Tutorial unter Ubuntu

Ubuntu-JDK installieren: [Link] Installieren Sie ...

Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading

Inhaltsverzeichnis Überblick Was ist Lazy Loading...

Implementierungsideen und Schritte für die MySQL-Master-Slave-Konstruktion (mehrere Master und ein Slave)

Hintergrund: Da die Projekte des Unternehmens dem...

Ausführliche Lektüre und Übungsaufzeichnungen zu bedingten Typen in TypeScript

Inhaltsverzeichnis Verwenden bedingter Typen in g...

Tutorial zur Installation von MySQL 5.7.9 mit RPM-Paket unter CentOS 7

Aufgezeichnetes MySQL 5.7.9-Installationstutorial...

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

Heute habe ich diese Eingabeaufforderung gefunden...

Detaillierte Erklärung von BOM und DOM in JavaScript

Inhaltsverzeichnis BOM (Browserobjektmodell) 1. F...

JavaScript implementiert Tab-Leisten-Umschalteffekte

Hier ist ein Fall, den Frontend-Entwickler kennen...

js realisiert 3D-Soundeffekte durch audioContext

In diesem Artikel wird der spezifische Code von j...

Detaillierte Erklärung der JavaScript-Array-Deduplizierung

Inhaltsverzeichnis 1. Array-Deduplizierung 2. Ded...

Detailliertes Tutorial zum Aufbau eines lokalen Ideenaktivierungsservers

Vorwort Der Blogger verwendet die Idea IDE. Da di...

Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst

Nachdem ich fast zwei Tage lang mit dem domänenüb...