FormData.getAll() — Methode · JavaScript-Referenz

Signatur

FormData.prototype.getAll(name)

Beschreibung

Die Methode getAll() liefert alle Einträge, die in einem FormData-Objekt unter einem bestimmten Schlüssel liegen. Das Ergebnis ist ein Array in Einfügereihenfolge. get() gibt dagegen nur den ersten passenden Wert zurück.

Gebraucht wird sie vor allem bei Formularfeldern, die mehrere Werte unter einem Namen senden können: Gruppen von Checkboxen mit gleichem name, <select multiple>, <input type="file" multiple> oder Einträge, die man per append() mehrfach hinzugefügt hat.

Jeder Wert im Array ist entweder ein string oder ein File. Gibt es keinen Eintrag mit dem Schlüssel, kommt ein leeres Array zurück und nicht null. Man kann das Ergebnis also ohne Prüfung direkt mit map(), filter() oder length weiterverarbeiten.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Der Schlüssel (Feldname), dessen Werte abgefragt werden. Groß- und Kleinschreibung werden unterschieden. Andere Typen werden in einen String umgewandelt.

Rückgabewert

Typ

Array<string | File>

Beschreibung

Ein neues Array mit allen Werten zum Schlüssel, in Einfügereihenfolge. Gibt es keinen Treffer, ist das Array leer ([]). Änderungen am Array wirken sich nicht auf das FormData-Objekt aus.

Beispiele

Mehrfach angehängte Werte auslesen

const fd = new FormData();
fd.append('tag', 'javascript');
fd.append('tag', 'web-api');
fd.append('tag', 'formdata');

console.log(fd.get('tag'));     // nur der erste Wert
console.log(fd.getAll('tag'));  // alle Werte
console.log(fd.getAll('fehlt')); // unbekannter Schlüssel

javascript ["javascript", "web-api", "formdata"] []

Checkbox-Gruppe beim Absenden auswerten

// HTML:
// <form id="prefs">
//   <label><input type="checkbox" name="interessen" value="sport" checked> Sport</label>
//   <label><input type="checkbox" name="interessen" value="musik"> Musik</label>
//   <label><input type="checkbox" name="interessen" value="reisen" checked> Reisen</label>
//   <button>Speichern</button>
// </form>

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

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const interessen = data.getAll('interessen');

  if (interessen.length === 0) {
    console.warn('Bitte mindestens ein Interesse wählen.');
    return;
  }
  console.log('Gewählt:', interessen);
});

Gewählt: ["sport", "reisen"]

Mehrere Dateien prüfen und hochladen

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

input.addEventListener('change', async () => {
  const fd = new FormData();
  for (const file of input.files) fd.append('bilder', file);

  const dateien = fd.getAll('bilder');
  const zuGross = dateien.filter((f) => f.size > 5 * 1024 * 1024);

  if (zuGross.length > 0) {
    console.error('Zu groß:', zuGross.map((f) => f.name));
    return;
  }

  const res = await fetch('/api/upload', { method: 'POST', body: fd });
  console.log(`${dateien.length} Datei(en) hochgeladen, Status ${res.status}`);
});

3 Datei(en) hochgeladen, Status 200

FormData in ein Objekt mit Arrays umwandeln

const fd = new FormData();
fd.append('name', 'Anna');
fd.append('sprache', 'de');
fd.append('sprache', 'en');

// Object.fromEntries würde Mehrfachwerte überschreiben – daher getAll()
const obj = {};
for (const key of new Set(fd.keys())) {
  const werte = fd.getAll(key);
  obj[key] = werte.length > 1 ? werte : werte[0];
}
console.log(obj);

{ name: "Anna", sprache: ["de", "en"] }

// Wichtig · Fallstricke

Leeres Array statt null: Im Gegensatz zu get() gibt getAll() bei fehlendem Schlüssel [] zurück. Eine Prüfung wie if (fd.getAll('x')) ist deshalb immer wahr. Stattdessen .length abfragen.
Nicht angehakte Checkboxen und deaktivierte Felder (disabled) landen gar nicht im FormData-Objekt und tauchen auch hier nicht auf.
Datei-Eingaben ohne Auswahl: Ein leeres <input type="file"> liefert in vielen Browsern ein File mit leerem Namen und size === 0. Das Ergebnis also nach f.size > 0 filtern.
Nur Kopie: Das zurückgegebene Array ist eine Momentaufnahme. Wer Werte ändern will, nimmt set(), append() oder delete().
Object.fromEntries(formData) behält pro Schlüssel nur den letzten Wert. Für Mehrfachwerte braucht man getAll().
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, auch in Web Workern. In Node.js ist FormData ab Version 18 global verfügbar. Der Internet Explorer unterstützt die Methode nicht.

Siehe auch

FormData FormData.prototype.get() FormData.prototype.append() FormData.prototype.set() FormData.prototype.has() FormData.prototype.delete() FormData.prototype.entries() URLSearchParams.prototype.getAll()