HTML5 API formdata — using



brief introduction

XMLHttpRequest Level 2 adds a new interface, formdata. Using formdata object, we can simulate a series of form controls with some key value pairs through JavaScript. We can also use the send() method of XMLHttpRequest to submit the “form” asynchronously. Compared with ordinary Ajax, the biggest advantage of using formdata is that we can upload a binary file asynchronously.


Through the formdata object, you can assemble a set of key / value pairs that send requests with XMLHttpRequest. It can be more flexible and convenient to send form data, 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 the formdata is the same as that transmitted through the submit () method.

  1. Constructors
var formData = new FormData(FormElement);

Here formelement is HTML, and the element is form; Of course, it can be constructed directly without filling in the form element. The purpose of filling in the form element is to directly select the name and value of the form element in the form to add a key value pair to the formdata.

  1. add to
    Append(): adds a key / value pair to the current formdata object.
append(DOMString name, Blob value, optional DOMString filename);
append(DOMString name, DOMString value);

Name: field name, that is, key name;
Value: field value, which can be a blob object, a file object, or a string. For the rest, the value will be automatically converted to a string;
File name: (optional) specifies the file name of the file. When the value parameter is specified as a blob object or a file object, the file name will be sent to the server. For blob objects, the value is “blob” by default.

  1. send out
    The formdata object with the key value pair added is directly used as the parameter of Ajax request. If your request is successful, you will see that formdata will generate all the form names and values in the form, as shown in the figure:

HTML5 API formdata -- using

Sample code

  1. html
<form enctype="multipart/form-data"  id=”form”>
  <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" id=”file” required />
<input type="file" name="fileother"  id=”fileother” required />
<input type="button" value="Stash the file!"  id=”submit”/>
  1. JS – uses plug-ins such as jQuery
    var file =null, fileOther=null,fd=new FormData($("#form")[0]);
    function bindEvent(){
            file = this.files[0];
            fileOther = this.files[0];
            fd.append("file", file);
            fd.append("fileother", fileOther);
    function ajaxSend(){
            url: "your url",
            type: "post",
            data: fd,
            Processdata: false, // do not process data
              Contenttype: false, // do not set the content type
              success: function(resp){
  1. The above case has a pit, because I stepped on it, so I leave it to you.

Other resources