Verwenden von FormData-Objekten
DasFormData-Objekt ermöglicht es Ihnen, eine Menge von Schlüssel/Wert-Paaren zu erstellen, die mit derFetch- oderXMLHttpRequest-API gesendet werden können. Es ist hauptsächlich zum Senden von Formulardaten gedacht, kann aber unabhängig von Formularen verwendet werden, um Schlüssel-Daten zu übermitteln. Die übertragenen Daten haben dasselbe Format, das diesubmit()-Methode des Formulars verwenden würde, um die Daten zu senden, wenn der Codierungstyp des Formulars aufmultipart/form-data eingestellt wäre.
Erstellen einesFormData-Objekts von Grund auf
Sie können einFormData-Objekt selbst erstellen, indem Sie es instanziieren und dann Felder hinzufügen, indem Sie seineappend()-Methode aufrufen, wie folgt:
const send = document.querySelector("#send");send.addEventListener("click", async () => { const formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountNum", 123456); // A file <input> element const avatar = document.querySelector("#avatar"); formData.append("avatar", avatar.files[0]); // JavaScript file-like object const content = '<q><span>hey!</span></q>'; const blob = new Blob([content], { type: "text/xml" }); formData.append("webmasterFile", blob); const response = await fetch("http://example.org/post", { method: "POST", body: formData, }); console.log(await response.json());});Hinweis:Die Felder"avatar" und"webmasterFile" enthalten beide eine Datei. Die der Feldzuweisung zugeordnete Zahl"accountNum" wird unmittelbar durch dieFormData.append()-Methode in einen String umgewandelt (der Wert des Feldes kann einBlob, einFile oder ein String sein. Wenn der Wert weder einBlob noch eineFile ist, wird der Wert in einen String umgewandelt).
Dieses Beispiel erstellt eineFormData-Instanz mit Werten für Felder namens"username","accountNum","avatar" und"webmasterFile" und verwendet dannfetch(), um die Daten des Formulars zu senden. Das Feld"webmasterFile" ist einBlob. EinBlob-Objekt stellt ein dateiähnliches Objekt aus unveränderlichen, rohen Daten dar. Blobs repräsentieren Daten, die nicht unbedingt in einem JavaScript-nativen Format vorliegen. DasFile-Interface basiert aufBlob, erbt die Blob-Funktionalität und erweitert sie, um Dateien auf dem System des Benutzers zu unterstützen. Um einBlob zu erstellen, können SiedenBlob()-Konstruktor aufrufen.
Abrufen einesFormData-Objekts aus einem HTML-Formular
Um einFormData-Objekt zu konstruieren, das die Daten eines bestehenden<form> enthält, geben Sie dieses Formularelement beim Erstellen desFormData-Objekts an:
Hinweis:>FormData verwendet nur Eingabefelder, die dasname-Attribut verwenden.
const formData = new FormData(someFormElement);Zum Beispiel:
const send = document.querySelector("#send");send.addEventListener("click", async () => { // A <form> element const userInfo = document.querySelector("#user-info"); const formData = new FormData(userInfo); const response = await fetch("http://example.org/post", { method: "POST", body: formData, }); console.log(await response.json());});Sie können demFormData-Objekt auch zusätzliche Daten hinzufügen, nachdem Sie es aus einem Formular abgerufen haben und bevor Sie es senden, wie folgt:
const send = document.querySelector("#send");send.addEventListener("click", async () => { const userInfo = document.querySelector("#user-info"); const formData = new FormData(userInfo); formData.append("serialnumber", 12345); const response = await fetch("http://example.org/post", { method: "POST", body: formData, }); console.log(await response.json());});Dies ermöglicht es Ihnen, die Daten des Formulars vor dem Versand anzureichern, um zusätzliche Informationen einzuschließen, die nicht unbedingt vom Benutzer bearbeitbar sind.
Versenden von Dateien mit einemFormData-Objekt
Sie können auch Dateien mitFormData senden. Fügen Sie ein<input>-Element des Typsfile in Ihr<form> ein:
<form enctype="multipart/form-data" method="post" name="fileinfo"> <p> <label >Your email address: <input type="email" autocomplete="on" name="userid" placeholder="email" required size="32" maxlength="64" /> </label> </p> <p> <label >Custom file label: <input type="text" name="file-label" size="12" maxlength="32" /> </label> </p> <p> <label >File to stash: <input type="file" name="file" required /> </label> </p> <p> <input type="submit" value="Stash the file!" /> </p></form>Dann können Sie es mit folgendem Code senden:
const form = document.querySelector("#fileinfo");form.addEventListener("submit", async (event) => { const formData = new FormData(form); formData.append("CustomField", "This is some extra data"); const response = await fetch("stash.php", { method: "POST", body: formData, }); event.preventDefault();});Hinweis:Wenn Sie eine Referenz zum Formular übergeben, wird die im Formular angegebeneHTTP-Anfragemethode anstelle der in deropen()-Aufruf angegebenen Methode verwendet.
Warnung:Wenn SieFormData verwenden, um POST-Anfragen mitXMLHttpRequest oder derFetch API mit demmultipart/form-data-Content-Type zu senden (z.B. beim Hochladen von Dateien und Blobs zum Server),setzen Sie nicht explizit denContent-Type-Header in der Anfrage. Andernfalls kann der Browser denContent-Type-Header mit dem Grenzausdruck, den er verwenden wird, um Formularfelder im Anfragetext zu trennen, nicht setzen.
Sie können auch eineFile oderBlob direkt zumFormData-Objekt hinzufügen, wie folgt:
data.append("myfile", myBlob, "filename.txt");Wenn Sie dieappend()-Methode verwenden, ist es möglich, den dritten optionalen Parameter zu verwenden, um einen Dateinamen innerhalb desContent-Disposition-Headers, der an den Server gesendet wird, zu übergeben. Wenn kein Dateiname angegeben ist (oder der Parameter nicht unterstützt wird), wird der Name "blob" verwendet.
Verwendung einesformdata-Events
Dasformdata-Ereignis, das neuer als dasFormData-Objekt ist, wird auf einemHTMLFormElement-Objekt ausgelöst, nachdem die Eintragsliste, die die Formulardaten repräsentiert, erstellt wurde. Dies geschieht beim Absenden des Formulars, kann aber auch durch den Aufruf einesFormData()-Konstruktors ausgelöst werden.
Dies ermöglicht es, einFormData-Objekt schnell in Antwort auf einformdata-Ereignis zu erhalten, anstatt es selbst zusammenstellen zu müssen.
Zum Beispiel können wir im JavaScript ein Formular referenzieren:
const formElem = document.querySelector("form");In unseremsubmit-Ereignis-Handler verwenden wirpreventDefault, um die Standardformularübermittlung zu stoppen, und rufen dann einenFormData()-Konstruktor auf, um dasformdata-Ereignis auszulösen:
formElem.addEventListener("submit", (e) => { // on form submission, prevent default e.preventDefault(); // construct a FormData object, which fires the formdata event new FormData(formElem);});Wenn dasformdata-Ereignis ausgelöst wird, können wir auf dasFormData-Objekt überFormDataEvent.formData zugreifen und damit machen, was wir möchten (unten posten wir es mitXMLHttpRequest an den Server).
formElem.addEventListener("formdata", (e) => { console.log("formdata fired"); // Get the form data from the event object const data = e.formData; for (const value of data.values()) { console.log(value); } // Submit the data via fetch() fetch("/formHandler", { method: "POST", body: data, });});Stolpersteine
DasFormData-Objekt enthält keine Daten aus Feldern, die deaktiviert sind, oder aus deaktivierten Fieldsets.
Siehe auch
MDN-Feedback-Box
Diese Seite wurde automatisch aus dem Englischen übersetzt.