使用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实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现烟花效果(面向对象)
Mar 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python常见数据结构详解
2014/07/24 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python类的用法实例浅析
2015/05/27 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python实现3D地图可视化
2020/03/25 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
一个C/C++编程面试题
2013/11/10 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
创先争优活动心得体会
2014/09/04 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
MySQL分布式恢复进阶
2022/07/23 MySQL