FileList.length — Eigenschaft · JavaScript-Referenz

Signatur

FileList.length

Beschreibung

Die Eigenschaft FileList.length liefert die Anzahl der File-Objekte in einer FileList. Eine solche Liste bekommst du vor allem über HTMLInputElement.files bei einem <input type="file"> oder über DataTransfer.files bei Drag & Drop.

Typische Einsatzzwecke sind: prüfen, ob der Nutzer überhaupt eine Datei gewählt hat (length === 0), die Anzahl hochzuladender Dateien begrenzen, einen Zähler in der Oberfläche anzeigen oder mit einer klassischen for-Schleife über item(i) bzw. files[i] iterieren.

Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie files.length = 0 wird ohne Fehlermeldung ignoriert (im Strict Mode gibt es einen TypeError). Um eine Auswahl zurückzusetzen, setzt man stattdessen input.value = "".

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl (unsigned long) mit der Anzahl der Dateien in der Liste. Ist 0, wenn keine Datei gewählt wurde.

Beispiele

Prüfen, ob eine Datei gewählt wurde

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

input.addEventListener('change', () => {
  const { files } = input;
  if (files.length === 0) {
    console.log('Keine Datei ausgewählt.');
    return;
  }
  console.log(`${files.length} Datei(en) ausgewählt.`);
});

3 Datei(en) ausgewählt.

Maximale Anzahl an Dateien begrenzen

const MAX_FILES = 5;
const input = document.querySelector('#upload');

input.addEventListener('change', () => {
  if (input.files.length > MAX_FILES) {
    alert(`Bitte höchstens ${MAX_FILES} Dateien auswählen.`);
    input.value = ''; // Auswahl zurücksetzen
    return;
  }
  for (let i = 0; i < input.files.length; i++) {
    const file = input.files[i];
    console.log(`${file.name}: ${file.size} Bytes`);
  }
});

bericht.pdf: 48213 Bytes foto.jpg: 1203344 Bytes

Dateianzahl bei Drag & Drop anzeigen

const dropZone = document.querySelector('#drop-zone');

dropZone.addEventListener('dragover', (event) => event.preventDefault());

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  const count = event.dataTransfer.files.length;
  dropZone.textContent = count === 1
    ? '1 Datei abgelegt'
    : `${count} Dateien abgelegt`;
});

2 Dateien abgelegt

FileList in ein Array umwandeln

const input = document.querySelector('#upload');

input.addEventListener('change', () => {
  const files = Array.from(input.files);
  console.log(files.length === input.files.length); // true
  const totalSize = files.reduce((sum, f) => sum + f.size, 0);
  console.log(`Gesamtgröße: ${totalSize} Bytes`);
});

true Gesamtgröße: 1251557 Bytes

// Wichtig · Fallstricke

Schreibgeschützt: files.length = 0 leert die Liste nicht. Zum Zurücksetzen nimmst du input.value = ''. Um eine Liste gezielt zu verändern, baust du über new DataTransfer() eine neue auf und weist dataTransfer.files dem Eingabefeld zu.
Kein echtes Array: FileList hat zwar length und Index-Zugriff, aber keine Methoden wie map oder filter. Nutze Array.from() oder Spread-Syntax [...files]. for...of funktioniert in modernen Browsern.
Nicht immer vorhanden: input.files ist bei Eingabefeldern, die nicht vom Typ file sind, null. Ein direkter Zugriff auf .length wirft dann einen Fehler, daher lieber input.files?.length ?? 0.
Drag & Drop: Bei dragover/dragenter ist dataTransfer.files.length aus Sicherheitsgründen meist 0. Verlässliche Werte gibt es erst im drop-Ereignis.
Ohne das Attribut multiple ist length höchstens 1.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

FileList FileList.item() File HTMLInputElement.files DataTransfer.files Array.from() CSSValueList.length