FileReader.readAsBinaryString() — Methode · JavaScript-Referenz

Signatur

FileReader.prototype.readAsBinaryString(blob)

Beschreibung

Die Methode readAsBinaryString() des FileReader-Interfaces liest den Inhalt eines Blob oder File asynchron ein. Sobald der Vorgang fertig ist, steht readyState auf DONE (2), das Ereignis load wird ausgelöst und die Eigenschaft result enthält einen String, in dem jedes Zeichen genau ein Byte der Datei darstellt (Zeichencode 0–255).

Solche Binärstrings stammen aus der Zeit vor Typed Arrays. Früher nutzte man sie, um Bytes mit charCodeAt() auszuwerten oder um sie mit btoa() in Base64 umzuwandeln. Die Methode selbst gibt nichts zurück. Das Ergebnis liest du im load-Handler (onload oder addEventListener("load", …)) aus. Bei Fehlern wird error ausgelöst und reader.error gesetzt.

Die Methode ist in der File-API-Spezifikation nur noch aus Kompatibilitätsgründen enthalten. Für neuen Code solltest du stattdessen readAsArrayBuffer() oder das Promise-basierte Blob.prototype.arrayBuffer() verwenden und die Bytes über ein Uint8Array verarbeiten. Für Data-URLs bzw. Base64 eignet sich readAsDataURL().

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Das `Blob`- oder `File`-Objekt, das gelesen werden soll.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das Ergebnis steht nach dem load-Ereignis als String in reader.result.

Beispiele

Datei aus einem Eingabefeld als Binärstring lesen

// HTML: <input type="file" id="datei">
const input = document.querySelector('#datei');

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

  const reader = new FileReader();
  reader.onload = () => {
    const binaer = reader.result;
    console.log(`Gelesen: ${binaer.length} Bytes`);
    console.log('Erstes Byte:', binaer.charCodeAt(0));
  };
  reader.onerror = () => console.error('Lesefehler:', reader.error);

  reader.readAsBinaryString(file);
});

Gelesen: 20480 Bytes Erstes Byte: 137

Dateityp anhand der Magic Bytes erkennen (PNG)

const istPng = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => {
    // PNG-Signatur: 89 50 4E 47
    resolve(reader.result === '\x89PNG');
  });
  reader.addEventListener('error', () => reject(reader.error));
  // Nur die ersten 4 Bytes lesen
  reader.readAsBinaryString(blob.slice(0, 4));
});

const blob = new Blob([new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a])]);
istPng(blob).then((ok) => console.log('PNG?', ok));

PNG? true

Binärstring in Base64 umwandeln

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const reader = new FileReader();

reader.onload = () => {
  // btoa erwartet genau einen solchen Binärstring
  const base64 = btoa(reader.result);
  console.log(base64);
};
reader.readAsBinaryString(blob);

SGFsbG8gV2VsdA==

Moderne Alternative: arrayBuffer() + Uint8Array

const leseBytes = async (blob) => {
  const buffer = await blob.arrayBuffer();
  return new Uint8Array(buffer);
};

const blob = new Blob([new Uint8Array([0x89, 0x50, 0x4e, 0x47])]);
leseBytes(blob).then((bytes) => {
  console.log([...bytes].map((b) => b.toString(16).padStart(2, '0')).join(' '));
});

89 50 4e 47

// Wichtig · Fallstricke

Veraltet: Die Methode steht zwar weiterhin in allen Browsern zur Verfügung, gilt aber als Legacy. Nimm für neuen Code besser readAsArrayBuffer() oder blob.arrayBuffer().
Kein Text im eigentlichen Sinn: Das Ergebnis ist kein dekodierter UTF-8-Text. Mehrbyte-Zeichen wie „ä“ erscheinen als mehrere einzelne Zeichen. Für Text verwendest du readAsText() oder blob.text().
Speicher und Leistung: JavaScript-Strings belegen intern oft 2 Byte pro Zeichen. Große Dateien brauchen als Binärstring daher deutlich mehr Speicher als ein ArrayBuffer.
InvalidStateError: Ein erneuter Aufruf, während derselbe Reader noch liest (readyState === LOADING), löst einen InvalidStateError aus. Verwende dann einen neuen FileReader oder warte auf loadend.
Asynchron: Direkt nach dem Aufruf ist reader.result noch null. Werte das Ergebnis erst im load-Handler aus.
In Web Workern gibt es zusätzlich FileReaderSync.readAsBinaryString() für synchrones Lesen.

Siehe auch

FileReader FileReader.readAsArrayBuffer() FileReader.readAsDataURL() FileReader.readAsText() FileReader.result Blob.arrayBuffer()