FormData.values() — Methode · JavaScript-Referenz

Signatur

FormData.prototype.values()

Beschreibung

Mit FormData.values() bekommst du einen Iterator über alle Werte eines FormData-Objekts, ohne die zugehörigen Schlüssel. Die Werte kommen in der Reihenfolge, in der sie mit append() oder set() hinzugefügt oder aus dem Formular übernommen wurden. Mehrfach vorhandene Schlüssel (z. B. bei Checkbox-Gruppen oder <select multiple>) liefern jeweils einen eigenen Eintrag.

Jeder Wert ist entweder ein string oder ein File-Objekt (bei Datei-Uploads oder wenn ein Blob angehängt wurde). Den Iterator kannst du mit for...of durchlaufen, mit dem Spread-Operator oder mit Array.from() in ein Array umwandeln.

Die Methode passt gut, wenn nur die Inhalte interessieren, z. B. um zu prüfen, ob irgendein Feld leer ist, um die Gesamtgröße aller hochgeladenen Dateien zu berechnen oder für eine schnelle Kontrolle beim Debuggen. Brauchst du auch die Feldnamen, nimm entries(). Für einzelne Felder sind get() oder getAll() besser geeignet.

Rückgabewert

Typ

Iterator<string | File>

Beschreibung

Ein Iterator, der alle Werte des FormData-Objekts in Einfügereihenfolge liefert, also Zeichenketten oder File-Objekte.

Beispiele

Werte mit for...of durchlaufen

const data = new FormData();
data.append('vorname', 'Anna');
data.append('nachname', 'Schmidt');
data.append('hobby', 'Lesen');
data.append('hobby', 'Radfahren');

for (const value of data.values()) {
  console.log(value);
}

Anna Schmidt Lesen Radfahren

Formular vor dem Absenden auf leere Felder prüfen

const form = document.querySelector('#kontakt');

form.addEventListener('submit', (event) => {
  const data = new FormData(form);
  const hatLeereFelder = [...data.values()]
    .some((value) => typeof value === 'string' && value.trim() === '');

  if (hatLeereFelder) {
    event.preventDefault();
    alert('Bitte alle Felder ausfüllen.');
  }
});

Gesamtgröße aller hochgeladenen Dateien berechnen

const form = document.querySelector('#upload');
const data = new FormData(form);

const gesamtBytes = Array.from(data.values())
  .filter((value) => value instanceof File)
  .reduce((summe, file) => summe + file.size, 0);

console.log(`Gesamt: ${(gesamtBytes / 1024 / 1024).toFixed(2)} MB`);

Gesamt: 3.42 MB

Wiederverwendung: Iterator ist nach einem Durchlauf erschöpft

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

const it = data.values();
console.log([...it]); // erster Durchlauf
console.log([...it]); // derselbe Iterator ist jetzt leer
console.log([...data.values()]); // ein neuer Iterator funktioniert wieder

['1', '2'] [] ['1', '2']

// Wichtig · Fallstricke

Iterator nur einmal nutzbar: Nach einem Durchlauf ist der Iterator leer. Für jeden weiteren Durchlauf musst du values() erneut aufrufen.
Keine Schlüssel: Die Feldnamen gehen verloren. Brauchst du sie, nimm entries() oder for (const [key, value] of formData).
Typprüfung nötig: Werte können string oder File sein. Prüfe vor String-Methoden wie trim() mit typeof oder instanceof File, welcher Typ vorliegt.
Leere Datei-Eingaben: Ein <input type="file"> ohne Auswahl liefert ein leeres File-Objekt mit name === "" und size === 0, keinen leeren String.
Nicht enthaltene Felder: Deaktivierte Felder (disabled), nicht angehakte Checkboxen und Felder ohne name-Attribut landen nicht im FormData-Objekt und tauchen deshalb auch in values() nicht auf.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Methode nicht. In Node.js ist FormData ab Version 18 global verfügbar.

Siehe auch

FormData FormData.entries() FormData.keys() FormData.getAll() FormData.append() Array.from() CSSUnparsedValue.keys()