使用jquery Ajax实现上传附件功能


Posted in jQuery onOctober 23, 2018

用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是”application/x-www-form-urlencoded“,此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石。Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件,用document.getElementById("文件控件的id").value只能拿到文件的name,因此去序列化去编码它也无从谈起(个人观点,有不同意见的欢迎给我留言)。

众所周知,用form提交表单的时候,有附件的时候,只要设置form的enctype="multipart/form-data",便可以上传附件。于是博主想到,若是能用Ajax提交一个form,那上传附件岂不是变的简单,再也不需要使用类似AjaxFileUpload之类的插件来作上传。html5让这一切便的简单。

FormData是html5的接口,使用它一行代码便可以拿到整个form表单对象:

     var form = new FormData(document.getElementById("form"));

然后我们拿着这个form对象,去赋给Ajax的data,并且阻止它将参数转成成String类型的键值对,此举需要设置processData属性为false,此属性默认为true;同时设置Ajax的编码方式为false(contentType: false),在form表单里已经设置了编码方式,Ajax的编码机制已经不需要,这样我们就可以用Ajax去提交一个form对象,从而解决表单有附件的问题。需要注意的是,务必将Ajax的提交方式,设置为post,get请求只能携带几kb的数据。若是不设置processData为false,去提交带附件的form同样是提交不上去的,它的序列化机制是硬伤。所以提交的时候,只能不使用它的序列化机制。

一言以蔽之:借Ajax的壳,去提交form。

示例如下:

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8" />
  <title>Ajax提交form</title>
  <script type="text/javascript">
  function test(){
   var form = new FormData(document.getElementById("form"));
   $.ajax({
   url:"接口地址",
   type:"post",
   data:form,
   cache: false,
   processData: false,
   contentType: false,
   success:function(data){
      alert("操作成功!");
   },
   error:function(e){
     alert("网络错误,请重试!!");
    }
   });    
  }
</script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
  <input type="text" id="name" name="name" />
  <input type="text" id="phone" name="phone" />
  <input type="text" id="content" name="content" />
  <input type="text" id="price" name="price" />
  <input type="text" id="ifPhone" name="ifPhone" />
  <input type="text" id="ifCerName" name="ifCerName" />
  <input type="text" id="endTime" name="endTime" />
  <input type="text" id="type" name="type" />
<input type="file" id="fileAttach" name="fileAttach" />
<input type="button" onclick="test()" value="上传" />
</form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
You might like
php+highchats生成动态统计图
2014/05/21 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
使用Flask集成bootstrap的方法
2018/07/24 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
详解python UDP 编程
2020/08/24 Python
python3 kubernetes api的使用示例
2021/01/12 Python
任意存:BOXFUL
2018/05/21 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
自我评价范文
2013/12/22 职场文书
大学新生军训感言
2014/02/25 职场文书
教师节宣传方案
2014/05/23 职场文书
医药销售自我评价200字
2014/09/11 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android