FormData对象是为序列化表以及建立与表单格式相同的数据(固然是用于XHR传输)提供便利。javascript
今天咱们使用dropzone和FormData实现多文件上传功能。java
var SAMP = null; //Dropzone对象
SAMP = new Dropzone("#dropzone",
{
url: "#", //后台响应的连接
maxFiles: 4, //最大能够传输的文件数量 目前咱们设定为1
maxFilesize: 2048, //文件大小的限制
acceptedFiles: ".png,.jpg,.gif,.jpeg,.bmp", // 文件格式的限制
autoProcessQueue:false, //文件是否自动传回到后台
myAwesomeDropzone:false,
})
咱们设置文件不自动上传，而经过控件按钮实现上传功能。首先咱们建立一个Dropzone对象，设置上传的最大文件数量，文件大小等。ajax
var myFormData = new FormData()
建立Form Data对象app
SAMP.on("addedfile", function(file) {
myFormData.append(file.name, file)
})
给Dropzone对象注册addedfile事件，当上传文件时，FormData对象的append()函数是以键值对的方式向myFormData成对成对的增添图片对象。函数
$.ajax({
type:'POST',
url:"#",
data:myFormData,
processData: false,//*必须写
contentType: false,//*必须写
success:function(data){
...
},
error:function(){
...
}
});
在使用FormData对象经过Ajax向后台传数据时，必须在选项中设置"processData: false,contentType: false,"两项，不然会报错。url
processData设置为false。由于data值是FormData对象，不须要对数据作处理。orm
contentType设置为false。由于是由
表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，因此这里设置为false。对象