FormData对象的使用以及上传文件

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其中最主要用于发送表单数据，但亦可用于发送带键数据(keyeddata)，而独立于表单使用。如果表单enctype属性设为multipart/form-data,则会使用表单的**submit()**方法老发送数据，从而，发送数据具有用样形式。

创建FormData对象

创建一个FormData对象，然后调用append()方法来添加字段

var formData =new FormData();

formData.append('username','siyu.li');
formData.append('accountNum',123455);//数字123455会被立即转换成字符串
//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);

也可直接向FormData对象附加File或Blob类型的文件：

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

使用append()方法时，可以通过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名（或者不支持该参数时），将使用名字“blob”。

注意：
FormData对象的字段类型可以是Blob,File,或者是string,
如果他的字段类型不是Blob或者File，则会被转换成字符串类。

上面示例创建一个formData实例，包含‘username’，‘accountNum’, ‘userfile’, 'webmasterfile’四个字段，然后使用xhr发送表单数据。字段’webmasterfile’是Blob类型。

使用FormData对象上传文件

可以通过jQuery来使用FormData对象

$.ajax({
  url: "......url",
  type: "POST",
  async: true,    //或false,是否异步
  data: formData,
  processData: false,  // 不处理数据
  contentType: false,  // 不设置内容类型
  success:function(data){
 },
  error:function(data){
  }
  
});