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 = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...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:

<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><p></p>

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

  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!