ajax formdata java,FormData+Ajax 实现多文件上传 学习使用FormData对象

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。对象