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

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“.

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!