Use of FormData in JavaScript objects

Usage of FormData object

In this article

1. How to create a FormData object

2. Created through HTML form FormData object

3. Use the FormData object to upload files

4. You can submit forms and upload files through AJAX without using the FormData object

5. Related links

The FormData object can be used to assemble a set of key/value pairs for sending requests using XMLHttpRequest . It makes sending form data more flexible and convenient because it can be used independently of the form. If you set the encoding type of the form to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted by the form through the submit() method

How Create a FormData objectEdit

You can create a FormData object yourself and then add fields by calling its append() method, like this:

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

Note: Fields "userfile" and "webmasterfile" both contain a file. Field "accountnum" is of numeric type and will be FormData.append() method is converted to a string type (FormData The field type of the object can be Blob, File, or string: If its field type is neither Blob nor File, it will be converted to a string type.

The above example creates a FormData instance, containing "username", "accountnum", "userfile" and "webmasterfile" four fields, and then use the send() method of XMLHttpRequest to send the form data. The field "webmasterfile" is Blob##. #Type. A Blob object represents an immutable, raw data-like file object. The data represented by Blob is not necessarily a JavaScript native format. The File interface is based on Blob and inherits from blob. functionality and extends it to support files on the user's system. You can create a Blob object through the Blob() constructor

Create a FormData object from an HTML form Edit

If you want to construct a FormData object containing Form data, you need to specify the elements of the form when creating the FormData object

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

#. ##You can also append additional data to the FormData object after creating a FormData object containing the Form form data and before sending the request, like this:

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

You are free to append fields that are not necessarily user-editable to the form data before sending the request

Use the FormData object to upload files

EditYou can also use FormData to upload files. When using it, you need to add a file type input to the form:

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

and then use the following code to send the request:

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

Note:

If the FormData object is created through a form, the request method specified in the form will be applied to the method open(). You can also directly attach File or Blob type files to the FormData object, as shown below:

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

When using the appned() method, you can send a request through the third optional parameter setting The header

Content-Disposition

specifies the file name. If no filename is specified (or if this parameter is not supported), the name "blob" will be used. If you set the correct configuration items, you can also use the FormData object through 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,  // 不处理数据
  contentType: false   // 不设置内容类型});

The above is the detailed content of Use of FormData in JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!