FormData ist eine ausführliche Einführung und Anwendung https://developer.mozilla.org/zh ... ng_FormData_Objects
Die Methoden und Ereignisse von FormData sind dort bereits sehr klar, daher werde ich hier keine Zeit damit verschwenden. Dieser Artikel erklärt hauptsächlich die Verwendung von FormData-Objekten und asynchronen Dateiuploads.
Das FormData-Objekt ermöglicht es uns, eine Sammlung von Schlüssel-Wert-Paaren zu organisieren, die mit dem XMLHttpRequest-Objekt gesendet werden. Es wird hauptsächlich zum Versand von Formulardaten verwendet, kann aber unabhängig von den mit Formularen übertragenen Daten verwendet werden.
1. Erstellen Sie ein FormData-Objekt von Grund auf
Du kannst dein eigenes FormData-Objekt erstellen und dann Schlüssel-Wert-Paare über die append()-Methode zum Objekt hinzufügen, wie folgt:
Hinweis: Sowohl die Felder "userfile" als auch "webmasterfile" enthalten Dateien. Die dem Feld "accountnum" zugewiesene Nummer wird direkt durch die Methode FormData.append() in eine Zeichenkette umgewandelt (der Wert des Feldes kann ein Blob, eine Datei oder eine Zeichenkette sein: Wenn der Wert weder ein Blob noch eine Datei ist, wird der Wert in eine Zeichenkette umgewandelt).
2. Ein FormData-Objekt aus einem HTML-Formular abrufen
Um ein FormData-Objekt mit bestehenden Formulardaten zu erhalten, muss man beim Erstellen des FormData-Objekts das Formularelement angeben.
So:
Sie können auch zusätzliche Daten hinzufügen, nachdem Sie das FormData-Objekt erhalten haben, wie zum Beispiel:
So kannst du vor dem Senden zusätzliche Informationen hinzufügen, die nicht unbedingt vom Nutzer bearbeitet werden.
3. Verwenden Sie das FormData-Objekt, um die Datei zu senden
Du kannst FormData verwenden, um Dateien zu senden. Ein einfaches <form>Drittes kann <input>ein Element enthalten:
Du kannst dann den folgenden Code verwenden, um es zu senden:
Du kannst auch eine Datei oder einen Blob direkt zum FormData-Objekt hinzufügen, so wie hier:
Bei Verwendung der append()-Methode kann ein dritter Parameter verwendet werden, um den Dateinamen zu senden (über den Content-Disposition-Header an den Server gesendet). Wenn der dritte Parameter nicht angegeben ist oder dieser Parameter nicht unterstützt wird, setzt der dritte Parameter standardmäßig auf "Blob".
Wenn Sie die richtigen Optionen setzen, können Sie es auch mit jQuery verwenden:
|
Veröffentlicht am 08.05.2018 16:30:39
|
|
|
