Detaillierte Analyse der Verwendung des HTML5-FormData-Objekts

XMLHttpRequest Level 2 fügt eine neue Schnittstelle hinzu – FormData 。Mithilfe von FormData 对象， können wir einige Schlüssel-Wert-Paare verwenden, um eine Reihe von Formularsteuerelementen über JavaScript zu simulieren. Wir können auch XMLHttpRequest senden ()-Methode zum asynchronen Senden des Formulars. Im Vergleich zu gewöhnlichem Ajax besteht der größte Vorteil der Verwendung von FormData darin, dass wir Binärdateien asynchron hochladen können.

Erstellen Sie ein FormData-Objekt

Sie können zunächst ein leeres FormData -Objekt erstellen und dann die Methode append()  verwenden, um dem Objekt wie folgt Felder hinzuzufügen:

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

Hinweis: Die Werte der -Felder „userfile“ und „webmasterfile“ enthalten beide eine Datei. Dem Feld „accountnum“ über die Methode FormData.append()  zugewiesene Zahlen werden automatisch in Zeichen umgewandelt (der Wert des Feldes kann ein Blob -Objekt, ein File-Objekt oder eine Zeichenfolge sein, die übrigen Werte anderer Typen werden jedoch verwendet). automatisch in eine Zeichenfolge umgewandelt werden).

In diesem Beispiel erstellen wir ein FormData-Objekt namens oMyForm, das Feldnamen mit den Namen „Benutzername“, „Kontonum“, „Benutzerdatei“ und „Webmasterdatei“ enthält, und verwenden dann die Methode XMLHttpRequest von send()  sendet diese Daten. Der Wert des Feldes „webmasterfile“ ist kein String, sondern ein Blob -Objekt.

Verwenden Sie das HTML-Formular , um ein FormData-Objekt zu initialisieren.

Sie können ein vorhandenes Formularelement zum Initialisieren verwenden. FormData 对象， Übergeben Sie einfach dieses form -Element als Parameter. Geben Sie das ein FormData  Konstruktor :

var newFormData = new FormData(someFormElement);

Zum Beispiel:

var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));

Sie können auch weiterhin neue Formulardaten basierend auf den vorhandenen Formulardaten hinzufügen. Der Schlüssel- Wertepaare lauten wie folgt:

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);

Sie können einige feste Felder hinzufügen, die Benutzer nicht auf diese Weise bearbeiten sollen, und sie dann

Verwenden Sie das FormData-Objekt an Senden Sie die Datei

Sie können auch FormData  verwenden, um Binärdateien zu senden. Zuerst muss ein Formularelement vorhanden sein, das ein Dateieingabefeld in HTML enthält:

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
</form>
<p id="output"></p>
<a href="javascript:sendForm()">Stash the file!</a>

Dann können Sie verwenden Verwenden Sie den folgenden Code, um die vom Benutzer ausgewählte Datei asynchron hochzuladen:

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  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 uploading your file.<br \/>";
    }
  };

  oReq.send(oData);
}

Sie können dem FormData -Objekt auch direkt ein File -Objekt oder ein Blob -Objekt hinzufügen, ohne ein HTML-Formular zu verwenden:

data.append("myfile", myBlob);

　Wenn ein Feldwert im FormData-Objekt ein Blob -Objekt ist, stellt es beim Senden einer HTTP-Anfrage den „Content-Dis“ des Dateinamens der darin enthaltenen Datei Blob  dar das -Objekt. Der Wert des Anforderungsheaders position“ variiert zwischen den Browsern. Firefox verwendet die feste Zeichenfolge „blob“, während Chrome eine zufällige Zeichenfolge verwendet.

Sie können jQuery auch zum Senden verwenden

FormData，但必须要正确的设置相关选项：

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

Browserkompatibilität

Desktop:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	7+	4.0 (2.0)	10+	12+	5+
支持filename参数	(Yes)	22.0 (22.0)	?	?	?

Mobil:

Feature Android Chrome für Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Grundlegende Unterstützung 3.0 ? 4.0 (2.0) ?

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0	?	4.0 (2.0)	?	12+	?
支持filename参数	?	?	22.0 (22.0)	?	?	?

12+ ? Unterstützung filename Parameter ? ? 22.0 (22.0) ? td> ?

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Verwendung des HTML5-FormData-Objekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!