使用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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery实现拖拽小方块效果
Dec 10 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python字符串和文件操作常用函数分析
2015/04/08 Python
python列表的增删改查实例代码
2018/01/30 Python
python数据封装json格式数据
2018/03/04 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
英语感恩演讲稿
2014/01/14 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2014年教育工作总结
2014/11/26 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
详解Python常用的魔法方法
2021/06/03 Python