使用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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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连接mssql数据库的几种方法
2013/02/21 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
script标签属性用type还是language
2015/01/21 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
python fabric实现远程部署
2017/01/05 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
浅析使用Python搭建http服务器
2019/10/27 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
初中生学习的自我评价
2013/11/14 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
优秀医生事迹材料
2014/02/12 职场文书
担保书格式及范文
2014/04/01 职场文书
抵押贷款承诺书
2014/05/30 职场文书
支行行长竞聘报告
2014/11/06 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
spring boot实现文件上传
2022/08/14 Java/Android