HTML5技术

FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜莹

字号+ 作者:H5之家 来源:H5之家 2017-03-08 18:01 我要评论( )

FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。 今天我们使用dropzone和FormData实现多文件上传功能。 var SAMP = null;//Dropzone对象SAMP = new Dropzone("#dropzone",{url: "#", //后台响应的链接maxFiles: 4, //

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。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用DapperExtensions和反射来实现一个通用搜索 - yt1983

    用DapperExtensions和反射来实现一个通用搜索 - yt1983

    2017-03-09 08:00

  • css3实现圆角边框渐变 - 就只是小茗

    css3实现圆角边框渐变 - 就只是小茗

    2017-03-08 15:00

  • [前言] 实现一个Android电子书阅读APP - xfangs

    [前言] 实现一个Android电子书阅读APP - xfangs

    2017-03-04 09:03

  • HTML5 File接口(在web页面上使用文件) - QxQstar

    HTML5 File接口(在web页面上使用文件) - QxQstar

    2017-02-27 16:00

网友点评
-