Signatur
Beschreibung
FileReaderSync ist das synchrone Gegenstück zu FileReader. Statt mit Events wie load oder error zu arbeiten, geben die Lesemethoden das Ergebnis direkt zurück. Bei einem Fehler werfen sie eine Ausnahme. Dadurch bleibt der Code linear und gut lesbar, ganz ohne Callbacks oder Promises.
Weil synchrones Lesen den Thread blockiert, gibt es das Interface nur in Web Workers (DedicatedWorkerGlobalScope, SharedWorkerGlobalScope), nicht im Hauptthread. Typische Einsätze sind rechenintensive Arbeiten an Dateien im Hintergrund, zum Beispiel Parsen großer CSV- oder JSON-Dateien, Prüfsummen berechnen oder Binärformate auswerten.
Der Konstruktor new FileReaderSync() erwartet keine Argumente. Diese Methoden stehen zur Verfügung:
readAsArrayBuffer(blob): gibt einArrayBuffermit den Rohdaten zurück.readAsText(blob, encoding): gibt einenstringzurück. Ohne Angabe wird UTF-8 verwendet.readAsDataURL(blob): gibt einedata:-URL mit Base64-kodiertem Inhalt zurück.readAsBinaryString(blob): veraltet. Jedes Byte wird als ein Zeichen zurückgegeben.
In neuem Code sind oft die Promise-Methoden von Blob einfacher: blob.text(), blob.arrayBuffer() und blob.stream(). Sie funktionieren überall, auch im Hauptthread.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $blob Pflicht | Blob | File | Das zu lesende Objekt. Gilt für alle readAs…-Methoden. |
|
| $encoding | string | "UTF-8" | Nur bei readAsText(): die Zeichenkodierung, z. B. "ISO-8859-1" oder "windows-1252". |
Rückgabewert
new FileReaderSync() gibt eine Leser-Instanz zurück. Die Lesemethoden geben je nach Methode direkt ein ArrayBuffer oder einen string zurück.Beispiele
Textdatei im Worker lesen und Zeilen zählen
// main.js
const worker = new Worker('worker.js');
document.querySelector('#datei').addEventListener('change', (e) => {
worker.postMessage(e.target.files[0]);
});
worker.onmessage = ({ data }) => console.log(`Zeilen: ${data.zeilen}`);
// worker.js
self.onmessage = ({ data: file }) => {
const reader = new FileReaderSync();
const text = reader.readAsText(file); // blockiert nur den Worker
self.postMessage({ zeilen: text.split('\n').length });
};Binärdaten lesen: PNG-Signatur prüfen
// worker.js
const PNG_SIGNATUR = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
self.onmessage = ({ data: file }) => {
const reader = new FileReaderSync();
// Nur die ersten 8 Bytes lesen
const buffer = reader.readAsArrayBuffer(file.slice(0, 8));
const bytes = new Uint8Array(buffer);
const istPng = PNG_SIGNATUR.every((b, i) => bytes[i] === b);
self.postMessage({ name: file.name, istPng });
};Fehlerbehandlung und Data-URL mit Kodierung
// worker.js
self.onmessage = ({ data: file }) => {
const reader = new FileReaderSync();
try {
const vorschau = reader.readAsDataURL(file);
const altText = reader.readAsText(file.slice(0, 200), 'windows-1252');
self.postMessage({ vorschau, altText });
} catch (err) {
// z. B. NotReadableError, wenn die Datei inzwischen gelöscht wurde
self.postMessage({ fehler: `${err.name}: ${err.message}` });
}
};// Wichtig · Fallstricke
- Nur in Workern: Im Hauptthread ist
FileReaderSyncnicht definiert. Ein Aufruf dort führt zuReferenceError: FileReaderSync is not defined. In Service Workern ist es nicht zuverlässig verfügbar, verwende dortblob.arrayBuffer(). - Fehler als Ausnahme: Statt eines
error-Events werfen die Methoden eineDOMException, z. B.NotFoundError,NotReadableErroroderSecurityError. Setze die Aufrufe deshalb in einentry…catch-Block. - Speicherbedarf: Die ganze Datei wird auf einmal in den Speicher geladen. Große Dateien liest du besser stückweise mit
blob.slice(start, end)oder mitblob.stream(). - Veraltet: Verwende
readAsBinaryString()nicht mehr.readAsArrayBuffer()zusammen mit typisierten Arrays ist die bessere Wahl. - Kompatibilität: Wird in Chrome, Firefox, Safari und Edge seit vielen Jahren in Dedicated und Shared Workern unterstützt. In Node.js gibt es dieses Interface nicht.