FormData实现上传多图片,学习使用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:"/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。

时间: 2024-08-01 14:52:02

FormData实现上传多图片,学习使用FormData的相关文章

通过Ajax方式上传文件(图片),使用FormData进行Ajax请求

HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input ty

[转]如何使用multipart/form-data格式上传文件

form表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是"application/x-www-form-urlencoded",不能用于文件上传:只有使用了multipart/form-data,才能完整的传递文件数据. 有时,在网络编程过程中需要向服务器上传文件.Multipart/form-data是上传文件的一种方式. Multipart/form-data其实就是浏览器用表单上传文件的

angular form-data文件上传

前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传服务器,然后通过服务器传阿里云. 下面直接贴前端代码: $http({ method: 'POST', url: '/wechatapp/User/setAvatar', data: data, headers: { 'Content-Type': undefined }, transformReq

如何使用multipart/form-data格式上传文件(POST请求时,数据是放在请求体内,而不是请求头内,在html协议中,用 “\r\n” 换行,而不是 “\n”)

在网络编程过程中需要向服务器上传文件.Multipart/form-data是上传文件的一种方式. Multipart/form-data其实就是浏览器用表单上传文件的方式.最常见的情境是:在写邮件时,向邮件后添加附件,附件通常使用表单添加,也就是用multipart/form-data格式上传到服务器. 表单形式上传附件 具体的步骤是怎样的呢? 首先,客户端和服务器建立连接(TCP协议). 第二,客户端可以向服务器端发送数据.因为上传文件实质上也是向服务器端发送请求. 第三,客户端按照符合“m

基于spring-boot的web应用,ckeditor上传文件图片文件

说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的配置图片文件上传功能,默认这个是没有开启的,就不用多说,ckeditor官网上也说的很清楚!http://docs.ckeditor.com 下面简单的说下配置(配置文件algoConfig.js): 1 CKEDITOR.editorConfig = function( config ) { 2

ajax图片上传,图片异步上传,更新

继承前文:图片上传_ajax上传之实际应用(附上Demo) 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D

FormData 对象上传二进制文件

使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件. 不是用<form>

C# 通过ASHX保存上传的图片并制作高质量的缩略图的代码

如下的内容段是关于C# 通过ASHX保存上传的图片并制作高质量的缩略图的内容,应该能对小伙伴也有帮助. <%@ WebHandler Language="C#" Class="UploadFile" Debug="true" %> using System; using System.Web; public class UploadFile : IHttpHandler { public void Proce***equest(Htt

node存储element-ui上传的图片

说明 element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器,可以使用action参数上传图片,也可以使用http-request自定义上传方式.这里我们使用自定义的方式上传. 前端代码 我们只是自定义了一个 upload方法,里面进行发送我们的请求,使用了FormData对象,它将数据编译成键值对,其主要用于发送表单数据. <template> <div id="app"> <h3>头像上传</h3> <e