FormData+Ajax 实现多文本及传 学习以FormData对象

FormData对象是为序列化表以及开创和表单格式相同之多少(当然是用来XHR传输)提供便利。

今日咱们采用dropzone和FormData实现多文件上传功能。

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对象,设置上传的最好要命文件数量,文件大小等。

var myFormData = new FormData()

  创建Form Data对象

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,”两桩,否则会报错。

  processData设置也false。因为data值是FormData对象,不需要对数据做处理。

  contentType设置也false。因为是由<form>表单构造的FormData对象,且已宣示了属于性enctype=”multipart/form-data”,所以这里安装也
false。

相关文章