Blob.size — Eigenschaft · JavaScript-Referenz

Signatur

get Blob.prototype.size

Beschreibung

Die Eigenschaft size gibt die Anzahl der Bytes zurück, die ein Blob enthält. Da File von Blob erbt, funktioniert sie genauso für Dateien, die der Nutzer über <input type="file"> oder per Drag & Drop auswählt.

Typische Anwendungsfälle sind das Prüfen von Upload-Limits vor dem Senden an den Server, die Anzeige lesbarer Dateigrößen in der Oberfläche und das Berechnen von Chunks, wenn große Dateien mit Blob.prototype.slice() in Teilstücken hochgeladen werden.

Wichtig: size zählt Bytes, nicht Zeichen. Ein Blob aus dem Text "ä" ist 2 Bytes groß, weil Zeichenketten beim Erzeugen eines Blobs als UTF-8 kodiert werden. Die Eigenschaft ist nur lesbar; die Größe eines Blobs lässt sich nachträglich nicht ändern, da Blobs unveränderlich sind.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Größe des Blobs in Bytes (0 bei einem leeren Blob).

Beispiele

Größe eines Text-Blobs ermitteln (Bytes vs. Zeichen)

const text = 'Grüße';
const blob = new Blob([text], { type: 'text/plain' });

console.log(text.length); // Zeichen
console.log(blob.size);   // Bytes (UTF-8)

5 7

Upload-Limit vor dem Senden prüfen

const MAX_BYTES = 5 * 1024 * 1024; // 5 MiB
const input = document.querySelector('#upload');

input.addEventListener('change', () => {
  for (const file of input.files) {
    if (file.size > MAX_BYTES) {
      alert(`${file.name} ist zu groß (${file.size} Bytes).`);
      input.value = ''; // Auswahl zurücksetzen
      return;
    }
  }
  console.log('Alle Dateien sind innerhalb des Limits.');
});

Lesbare Dateigröße formatieren

const formatBytes = (bytes) => {
  if (bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
};

const blob = new Blob([new Uint8Array(1_500_000)]);
console.log(formatBytes(blob.size));

1.4 MB

Datei in Chunks für den Upload aufteilen

const uploadInChunks = async (file, chunkSize = 1024 * 1024) => {
  const total = Math.ceil(file.size / chunkSize);
  for (let i = 0; i < total; i++) {
    const start = i * chunkSize;
    const chunk = file.slice(start, Math.min(start + chunkSize, file.size));
    await fetch('/upload', {
      method: 'POST',
      headers: { 'Content-Range': `bytes ${start}-${start + chunk.size - 1}/${file.size}` },
      body: chunk,
    });
    console.log(`Chunk ${i + 1}/${total} (${chunk.size} Bytes) gesendet`);
  }
};

// Wichtig · Fallstricke

Bytes ≠ Zeichen: Für Textinhalte weicht blob.size von string.length ab, sobald Nicht-ASCII-Zeichen (Umlaute, Emojis) enthalten sind. Für die Byte-Länge eines Strings ohne Blob eignet sich new TextEncoder().encode(str).length.
Schreibgeschützt: Eine Zuweisung wie blob.size = 10 wird ignoriert (im Strict Mode TypeError).
Keine Sicherheitsgarantie: Größenprüfungen im Browser dienen nur dem Komfort und lassen sich umgehen – Upload-Limits müssen immer auch serverseitig durchgesetzt werden.
Einheiten: Achte bei der Anzeige auf die Unterscheidung zwischen 1000 (kB, SI) und 1024 (KiB, binär).
Kompatibilität: In allen modernen Browsern verfügbar; in Node.js ist Blob ab Version 15.7 im Modul buffer und ab 18 global vorhanden.

Siehe auch

Blob Blob.type Blob.prototype.slice() File Attr.specified