Detailed introduction to FormData object in HTML

Today I will give you a detailed introduction to the FormData object. Next, create a FormData object from scratch, and then add key values ​​​​to the object through the append() method. Please see the case

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

Note: Field" userfile" and "webmasterfile" both include files (file). The number assigned to the field "accountnum" is directly converted into a string by the FormData.append() method (the value of the field may be a Blob, File, or a string: if the value is both If it is not a Blob or a File, the value will be converted to a string).

This example creates a FormData instance that contains the fields "username", "accountnum", "userfile" and "webmasterfile", and then uses the send() method of the XMLHttpRequest object to send the form data. The field "webmasterfile" is a Blob. A Blob object represents the raw data of a file object. But the data represented by Blob does not have to be data in the native JavaScript format. The file interface is based on Blob, inheriting Blob functions and expanding its support for user file systems. To construct a Blob, call Blob()Constructor.

Get a FormData object from a HTML form

In order to obtain a FormData object containing existing form data, you need to specify the form element when creating the FormData object.

var formData = new FormData(someFormElement);

Like the following:

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

You can also add additional data after obtaining the FormData object, like the following:

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

In this way you can add additional data before sending Add additional information, not necessarily edited by the user.

3. Use the FormData object to send files

You can use FormData to send files. Simply include an element in the

:

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

Then you can use the following code to send:

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

You can also add File or Blob directly to the FormData object, like this:

<br/>

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

When When using the append() method, the third parameter may be used to send the file name (sent to the server through the Content-Disposition header). If the third parameter is not specified or is not supported, the third parameter defaults to "blob".

<br/>

If you set the correct options, you can also use it with jQuery:

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

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

Implementation steps of using Js to operate HTTP Cookies

Detailed introduction to Js operating BOM object model

What is the difference between div and span in HTML web page layout

The above is the detailed content of Detailed introduction to FormData object in HTML. For more information, please follow other related articles on the PHP Chinese website!