使用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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python3中sys.argv的实例用法
2020/04/24 Python
python对execl 处理操作代码
2020/06/22 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
个人公开承诺书
2014/03/28 职场文书
学习雷锋标语
2014/06/25 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript