使用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日程管理控件glDatePicker用法详解
Mar 29 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JQuery属性操作与循环用法示例
May 15 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版(4)
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php遍历数组的方法分享
2012/03/22 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
深入理解node.js http模块
2018/01/24 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
详解KMP算法以及python如何实现
2020/09/18 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
电钳工人个人求职信
2014/05/10 职场文书
英文慰问信
2015/02/14 职场文书
大国崛起观后感
2015/06/02 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang