使用FormData对象打包参数和上传文件
FormData对象
FormData是H5新增的一个HTML对象，可以用JS代码来传输 Content-type:multipart/form-data 的对象
初始化
通常有两种初始化方式
1 2 3 4 | //新建一个空的Form对象 var form1 = new FormData(); //通过读取一个已经存在的Form标签来新建对象 var form2 = new FormData(document.getElementById("formId")); |
添加变量
可以使用append/get方法来进行字段的添加和删除
1 2 3 4 | //添加某个名为key的字段 form1.append("key","value"); //取出文件添加入file字段 form1.append("file",$('#file').files[0]); |
注意files函数返回的是一个文件数组，注意取出对象
获得变量值
FormData对象内的参数是私有的，无法通过打点调用，需要通过get函数来读取，但是貌似Safari不支持，Chrome支持
1 2 3 4 | //错误的方式 var key1 = form1.key //正确的方式 var key2 = form1.get("key") |
发送Ajax
在发送Ajax的时候，由于FormData本身已经设定了Content-type所以JQuery的Ajax需要设定一些参数
1 2 3 4 5 6 7 8 | $.ajax("url", { type: 'POST', data: form1, processData: false, //不对数据进行处理 contentType: false //不对Content-type进行处理 } ).done(function(res) { }).fail(function(res) {}); |
后台的处理
出了要发送订制过的Ajax之外，也需要在后台开启multipart/form-data的数据绑定和接收，以Java为例，参考HTTP的参数绑定
评论