FormData: FormData() Konstruktor

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Der FormData() Konstruktor erstellt ein neues FormData Objekt.

Syntax

new FormData()
new FormData(form)
new FormData(form, submitter)

Parameter

form Optional: Ein HTML <form> Element – wenn angegeben, wird das FormData Objekt mit den aktuellen Schlüsseln/Werten des form basierend auf dem Namen der Elemente für die Schlüssel und ihren übermittelten Werten für die Werte gefüllt. Es wird auch Dateieingaben kodieren. Ein formdata Ereignis wird auf dem Formular ausgelöst, wenn das FormData Objekt erstellt wird, damit das Formular die FormData bei Bedarf ändern kann.
submitter Optional: Ein Submit-Button, der ein Mitglied des form ist. Wenn der submitter ein name Attribut hat oder ein <input type="image"> ist, werden seine Daten in das `FormData` Objekt einbezogen (z.B. btnName=btnValue).

Ausnahmen

TypeError: Wird ausgelöst, wenn der angegebene submitter kein Submit-Button ist.
NotFoundError DOMException: Wird ausgelöst, wenn der angegebene submitter kein Mitglied des form ist. Der submitter muss entweder ein Nachfahre des Formularelements sein oder ein form Attribut haben, das auf das Formular verweist.

Beispiele

Erstellen eines leeren FormData

Die folgende Zeile erstellt ein leeres FormData Objekt:

const formData = new FormData();

Sie könnten ein Schlüssel/Wert-Paar mit append() hinzufügen:

formData.append("username", "Chris");

Vorbefüllen aus einem HTML-Formular-Element

Sie können die optionalen Argumente form und submitter angeben, wenn Sie das FormData Objekt erstellen, um es mit Werten aus dem angegebenen Formular vorzufüllen.

Hinweis: Nur erfolgreiche Formularsteuerungen sind in einem FormData Objekt enthalten, d.h. solche mit einem Namen und nicht in einem deaktivierten Zustand.

HTML

html

<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />
  <button name="intent" value="save">Save</button>
  <button name="intent" value="saveAsCopy">Save As Copy</button>
</form>

<output id="output"></output>

form {
  display: none;
}

output {
  display: block;
  white-space: pre-wrap;
}

JavaScript

const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);

const output = document.getElementById("output");

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;
}

Ergebnis

Zur Kürze ist das <form> Element aus der Ansicht ausgeblendet.

Spezifikationen

Specification
XMLHttpRequest # dom-formdata