FileReader: progress — Ereignis · JavaScript-Referenz

Signatur

fileReader.addEventListener("progress", handler)

Beschreibung

Das progress-Event der FileReader-Schnittstelle wird während eines laufenden Lesevorgangs (readAsArrayBuffer(), readAsText(), readAsDataURL(), readAsBinaryString()) wiederholt ausgelöst. Es ist ein ProgressEvent mit den Eigenschaften loaded (bisher gelesene Bytes), total (Gesamtgröße in Bytes) und lengthComputable (ob total bekannt ist).

Typischer Einsatzzweck ist eine Fortschrittsanzeige beim Einlesen großer Dateien, etwa in einem <progress>-Element. Laut Spezifikation feuert das Event höchstens etwa alle 50 ms; bei kleinen Dateien kann es daher auch nur einmal oder gar nicht vor load erscheinen.

Der Handler kann per addEventListener("progress", handler) oder über die Eigenschaft onprogress registriert werden. Die Reihenfolge der Events eines Lesevorgangs ist: loadstart → progress (0–n-mal) → load bzw. error/abort → loadend.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler erhält ein ProgressEvent.

Beispiele

Fortschrittsbalken beim Einlesen einer Datei

// HTML: <input type="file" id="datei"> <progress id="balken" max="100" value="0"></progress>
const input = document.querySelector('#datei');
const balken = document.querySelector('#balken');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const prozent = Math.round((event.loaded / event.total) * 100);
      balken.value = prozent;
      console.log(`Gelesen: ${prozent} %`);
    }
  });

  reader.addEventListener('load', () => {
    balken.value = 100;
    console.log(`Fertig: ${reader.result.byteLength} Bytes`);
  });

  reader.readAsArrayBuffer(file);
});

Gelesen: 23 % Gelesen: 61 % Gelesen: 100 % Fertig: 5242880 Bytes

onprogress-Eigenschaft und Promise-Wrapper

const leseDatei = (file, onFortschritt) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onprogress = (e) => {
      if (e.lengthComputable) onFortschritt(e.loaded / e.total);
    };
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });

const blob = new Blob(['Hallo Welt'.repeat(100000)], { type: 'text/plain' });
const text = await leseDatei(blob, (anteil) =>
  console.log(`${(anteil * 100).toFixed(0)} %`)
);
console.log(text.length);

100 % 1000000

Listener mit AbortController entfernen

const reader = new FileReader();
const controller = new AbortController();

const onProgress = (e) => console.log(`${e.loaded} / ${e.total} Bytes`);
reader.addEventListener('progress', onProgress, { signal: controller.signal });

reader.addEventListener('loadend', () => {
  // Aufräumen – gleichwertig: reader.removeEventListener('progress', onProgress)
  controller.abort();
  console.log('Listener entfernt');
});

reader.readAsDataURL(new Blob([new Uint8Array(2_000_000)]));

2000000 / 2000000 Bytes Listener entfernt

// Wichtig · Fallstricke

Nicht garantiert: Bei kleinen oder im Speicher liegenden Blobs wird progress oft nur einmal (mit loaded === total) oder gar nicht vor load ausgelöst. Fertigstellung immer über load/loadend behandeln, nicht über progress.
Vor der Division lengthComputable prüfen – sonst kann total 0 sein und das Ergebnis NaN/Infinity.
reader.result ist während progress noch nicht zuverlässig verfügbar (meist null). Für echtes stückweises Verarbeiten besser Blob.prototype.stream() verwenden.
Die Drosselung auf ca. 50 ms ist in der Spezifikation festgelegt; teure DOM-Updates im Handler trotzdem sparsam halten.
Kompatibilität: in allen modernen Browsern unterstützt (Baseline), auch in Web Workern. FileReaderSync (nur Worker) feuert keine Events.

Siehe auch

Blob.prototype.stream() BackgroundFetchRegistration: progress FileReader: abort FileReader: error FileReader: loadend