码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-03-07 22:40:31      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:awesome   orm   自动   success   lin   ajax   ipa   sof   Enctype   

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。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false

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

标签:awesome   orm   自动   success   lin   ajax   ipa   sof   Enctype   

原文地址:http://www.cnblogs.com/xiabaoying/p/6516905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!