FormData

brief introduction

XMLHttpRequest Level 2 adds a new interface FormData. Using FormData objects, we can use JavaScript to simulate a series of form controls with some key-value pairs. We can also use the send() method of XMLHttpRequest to submit this "form" asynchronously. Compared with ordinary ajax, the greatest advantage of using FormData is that we can upload a binary file asynchronously.

Use

FormData objects allow you to assemble a set of key/value pairs that send requests with XMLHttpRequest. It can send form data more flexibly and conveniently, because it can be used independently of form. If you set the form encoding type to multipart/form-data, the data format transmitted through FormData is the same as the data format transmitted through submit() method.

1. Constructor

var formData = new FormData(FormElement);

FormElement here is a form with html elements; of course, it can also 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 key-value pairs to the form data.

1. Add to
   append(): Add 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: The field value, which can be a Blob object, a File object, a string, and the rest, will be automatically converted to a string;
filename: (optionally) Specify the file name of the file. When the value parameter is specified as a Blob object or a File object, the file name is sent to the server. For a Blob object, this value defaults to "blob".

1. Send out
   formData objects that have been added key-value pairs are directly used as parameters passed in ajax requests. If your request succeeds, you will see that formData generates all the form name s and values in the form as shown in the figure:

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 />
  </form>
<input type="file" name="fileother"  id="fileother" required />
<input type="button" value="Stash the file!"  id="submit"/>
<div></div>

1. js - Using plug-ins like jquery

(function(){
    var file =null, fileOther=null,fd=new FormData($("#form")[0]);
    bindEvent();
    function bindEvent(){
        $("#file").change(function(){
            file = this.files[0];
        });
        $("#fileother").change(function(){
            fileOther = this.files[0];
        })
        $("#submit").click(function(){
            fd.append("file", file);
            fd.append("fileother", fileOther);
            ajaxSend();
        })
    }
    function ajaxSend(){
        $.ajax({
            url: "your url",
            type: "post",
            data: fd,
            processData: false,  // Do not process data
              contentType: false,   // Do not set content type
              success: function(resp){
                  console.log(resp);
              }
        })
    }
})()

1. There is a pit in the above case, because I have trampled on it, so leave it to you.

Other resources

1,https://developer.mozilla.org...
2,https://developer.mozilla.org...
3,http://www.cnblogs.com/lhb25/...