Detaillierte Einführung in das FormData-Objekt in HTML

Heute werde ich Ihnen eine detaillierte Einführung in das FormData-Objekt geben und dann über die Methode append() Schlüsselwerte zum Objekt hinzufügen.

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");

Hinweis: Die Felder „userfile“ und „webmasterfile“ enthalten beide Datei (Datei). Die dem Feld „accountnum“ zugewiesene Nummer wird von der FormData.append()-Methode direkt in einen String konvertiert (der Wert des Feldes kann ein Blob, eine Datei oder ein String sein: wenn der Wert ist Wenn es sich nicht um einen Blob oder eine Datei handelt, wird der Wert in einen String konvertiert.

In diesem Beispiel wird eine FormData-Instanz erstellt, die die Felder „Benutzername“, „Kontonum“, „Benutzerdatei“ und „Webmasterdatei“ enthält, und dann wird die send()-Methode des XMLHttpRequest-Objekts verwendet, um die Formulardaten zu senden. Das Feld „webmasterfile“ ist ein Blob. Ein Blob-Objekt repräsentiert die Rohdaten eines Dateiobjekts. Die durch Blob dargestellten Daten müssen jedoch keine Daten im nativen JavaScript-Format sein. Die Dateischnittstelle basiert auf Blob, übernimmt die Blob-Funktionalität und erweitert die Unterstützung für Benutzer-Dateisysteme. Um einen Blob zu erstellen, rufen Sie den Blob()-Konstruktor auf.

Erhalten Sie ein FormData-Objekt aus einem HTML-Formular

Um ein FormData-Objekt mit vorhandenen Formulardaten zu erhalten, müssen Sie beim Erstellen des FormData-Objekts das Formularelement angeben .

var formData = new FormData(someFormElement);

So:

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

Sie können auch zusätzliche Daten hinzufügen, nachdem Sie das FormData-Objekt erhalten haben, wie folgt:

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);

Auf diese Weise können Sie hinzufügen zusätzliche Informationen vor dem Absenden, die nicht unbedingt vom Benutzer bearbeitet werden müssen.

3. Verwenden Sie das FormData-Objekt zum Senden von Dateien

Sie können FormData zum Senden von Dateien verwenden. Ein einfaches enthält lediglich ein -Element:

<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 />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Dann können Sie den folgenden Code zum Senden verwenden:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
  var oOutput = document.querySelector("div"),
      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.<br \/>";
    }
  };
  oReq.send(oData);
  ev.preventDefault();
}, false);

<br/>

Sie können File oder Blob auch direkt zum FormData-Objekt hinzufügen, wie folgt:

<br/>

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

Bei Verwendung der append()-Methode kann der dritte Parameter zum Senden des Dateinamens verwendet werden (der über den Content-Disposition-Header an den Server gesendet wird). Wenn der dritte Parameter nicht angegeben ist oder nicht unterstützt wird, ist der dritte Parameter standardmäßig „blob“.

<br/>

Wenn Sie die richtigen Optionen festlegen, können Sie es auch mit jQuery verwenden:

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

Ich glaube, Sie haben es nach dem Lesen dieser Fälle gemeistert. Methode: Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Implementierungsschritte für die Verwendung von Js zum Betreiben von HTTP-Cookies

Detaillierte Einführung in das BOM-Objektmodell von Js

Was ist der Unterschied zwischen div und span im HTML-Webseitenlayout

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das FormData-Objekt in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!