使用FormData对象打包参数和上传文件

2016-12-01

FormData对象

FormData是H5新增的一个HTML对象，可以用JS代码来传输 Content-type:multipart/form-data 的对象

初始化

通常有两种初始化方式

//新建一个空的Form对象
var form1 = new FormData();
//通过读取一个已经存在的Form标签来新建对象
var form2 = new FormData(document.getElementById("formId"));

添加变量

可以使用append/get方法来进行字段的添加和删除

//添加某个名为key的字段
form1.append("key","value");
//取出文件添加入file字段
form1.append("file",$('#file').files[0]);

注意files函数返回的是一个文件数组，注意取出对象

获得变量值

FormData对象内的参数是私有的，无法通过打点调用，需要通过get函数来读取，但是貌似Safari不支持，Chrome支持

//错误的方式
var key1 = form1.key
//正确的方式
var key2 = form1.get("key")

发送Ajax

在发送Ajax的时候，由于FormData本身已经设定了Content-type所以JQuery的Ajax需要设定一些参数

 $.ajax("url",
      {
        type: 'POST',
        data: form1,
        processData: false, //不对数据进行处理
        contentType: false  //不对Content-type进行处理
      }
).done(function(res) { }).fail(function(res) {});

后台的处理

出了要发送订制过的Ajax之外，也需要在后台开启multipart/form-data的数据绑定和接收，以Java为例，参考HTTP的参数绑定