FormData实现上传多图片，学习使用FormData

您所在的位置：网站首页 › 查看formdata里的内容 › FormData实现上传多图片，学习使用FormData

FormData实现上传多图片，学习使用FormData

#FormData实现上传多图片，学习使用FormData| 来源: 网络整理| 查看: 265

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:"/upload-img/", 　　　　　　　data:myFormData, processData: false,//*必须写 contentType: false,//*必须写　　　　　　　success:function(data){ 　　　　　　　　　　　 ... 　　　　　　　　}, 　　　　　　error:function(XMLHttpRequest, textStatus, errorThrown){ 　　　　　　　　　　　　...　　　　　　　　 } });

　　在使用FormData对象通过Ajax向后台传数据时，必须在选项中设置"processData: false,contentType: false,"两项，否则会报错。

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

　　contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

【本文地址】

FormData实现上传多图片，学习使用FormData

FormData实现上传多图片，学习使用FormData

今日新闻

推荐新闻