使用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 12 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现的分页插件完整示例
May 26 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python学习教程之使用py2exe打包
2017/09/24 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python list格式数据excel导出方法
2018/10/31 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
如何基于python实现不邻接植花
2020/05/01 Python
JPA的优势都有哪些
2013/07/04 面试题
社区党务公开实施方案
2014/03/18 职场文书
个人函授自我鉴定
2014/03/25 职场文书
运动会方阵口号
2014/06/07 职场文书
法定授权委托证明书
2015/06/18 职场文书
优秀大学生申请书
2019/06/24 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python