Verwendung von FormData in JavaScript-Objekten

Verwendung des FormData-Objekts

In diesem Artikel

1. So erstellen Sie ein FormData-Objekt

2. Erstellt über ein HTML-Formular FormData-Objekt

3. Verwenden Sie das FormData-Objekt, um Dateien hochzuladen

4. Sie können Formulare übermitteln und Dateien über AJAX hochladen, ohne das FormData-Objekt zu verwenden

5. Verwandte Links

Das FormData-Objekt kann verwendet werden, um einen Satz von Schlüssel-/Wertpaaren zusammenzustellen, die zum Senden verwendet werden Anfragen mit XMLHttpRequest. Das Versenden von Formulardaten wird dadurch flexibler und komfortabler, da es unabhängig vom Formular genutzt werden kann. Wenn Sie den Kodierungstyp des Formulars auf „multipart/form-data“ festlegen, ist das über FormData übertragene Datenformat dasselbe wie das vom Formular über die Methode submit() übertragene Datenformat

Anleitung Erstellen Sie ein FormData-ObjektBearbeiten

Sie können selbst ein FormData-Objekt erstellen und dann Felder hinzufügen, indem Sie dessen Methode append() aufrufen, etwa so:

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input，由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = '975f881abd041d8a9a52113a3d7608728ad3eee38b36f0786840bfc85b25539ahey!0d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

Hinweis: Die Felder „userfile“ und „webmasterfile“ enthalten beide eine Datei. Das Feld „accountnum“ ist ein numerischer Typ, der in einen String-Typ konvertiert wird durch die FormData.append()-Methode (FormData Der Feldtyp des Objekts kann Blob, File oder String sein: Wenn sein Feldtyp nicht Blob oder File ist, wird es in den String-Typ konvertiert. Das obige Beispiel erstellt eine -Instanz mit vier Feldern: „Benutzername“, „Kontonummer“, „Benutzerdatei“ und „Webmasterdatei“ und verwendet dann die Methode „

“, um Formulardaten zu senden 🎜>-Typ. Ein

BlobFormData-Objekt stellt ein unveränderliches, rohdatenähnliches Dateiobjekt dar. Die XMLHttpRequest-Schnittstelle basiert auf Blob und erbt die Blob-Funktionalität . Erweitern Sie dies, um Dateien auf dem System des Benutzers zu unterstützen. Sie können ein Blob-Objekt über den send() Konstruktor BlobErstellen Sie ein FormData-Objekt über ein HTML-Formular FileBearbeitenBlob()

Um ein FormData-Objekt zu erstellen, das Formulardaten enthält, müssen Sie beim Erstellen des FormData-Objekts die Elemente des Formulars angeben

Sie Sie können auch nach dem Erstellen eines FormData-Objekts, das die Formulardaten enthält, und vor dem Senden der Anfrage zusätzliche Daten an das FormData-Objekt anhängen, wie folgt:

var formData = new FormData(someFormElement);
示例：var formElement = document.querySelector("form");var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

damit Sie Sie können Felder, die nicht unbedingt vom Benutzer bearbeitet werden können, vor dem Senden der Anfrage gerne an die Formulardaten anhängen

Verwenden Sie das FormData-Objekt, um Dateien hochzuladen

var formElement = document.querySelector("form");var formData = new FormData(formElement);var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

Bearbeiten

Sie können FormData auch zum Hochladen von Dateien verwenden. Wenn Sie es verwenden, müssen Sie dem Formular eine Dateitypeingabe hinzufügen:

und dann verwenden Folgender Code zum Senden der Anfrage:

ff146639ecf87721cba4be18b8688d52
  2e1cf0710519d5598b1f0f14c36ba674Your email address:8c1ecd4bb896b2264e0711597d40766c
  fdd4de8b295fab4aa0708ba29a56a4f8ff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674Custom file label:8c1ecd4bb896b2264e0711597d40766c
  3c2750d34148cf8c03cc62edc6c563efff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c
  965e00529aa4b86d8dd68bfcdaa48288
  5fa1d26c6939704a2c990d4281d4b44df5a47148e367a6035fd7a2faa965022ee388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {  var oOutput = document.querySelector("p"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.666a5bd9fab33f2f6688eb1baf827b5d";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

Hinweis:

Wenn das FormData-Objekt durch a erstellt wird Formular wird die im Formular angegebene Anforderungsmethode in der Methode open() angewendet.

Sie können Dateien vom Typ „File“ oder „Blob“ auch direkt an das FormData-Objekt anhängen, wie unten gezeigt:

Bei Verwendung der appned()-Methode können Sie sie über die dritte Option festlegen Parameter Senden Sie den Anforderungsheader

, um den Dateinamen anzugeben. Wenn kein Dateiname angegeben ist (oder dieser Parameter nicht unterstützt wird), wird der Name „blob“ verwendet.

Sie können das FormData-Objekt auch über jQuery verwenden, wenn Sie die richtige Konfiguration festlegen:

data.append("myfile", myBlob, "filename.txt");

Content-Disposition 

Das obige ist der detaillierte Inhalt vonVerwendung von FormData in JavaScript-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!