使用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实现简单的手风琴效果
Apr 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
JQuery获得内容和属性方法解析
May 30 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递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
angularjs基础教程
2014/12/25 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
python装饰器decorator介绍
2014/11/21 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
超市业务员岗位职责
2013/12/05 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
团委竞选演讲稿
2014/04/24 职场文书
孔庙导游词
2015/02/04 职场文书
世界红十字日活动总结
2015/02/10 职场文书
春季运动会加油词
2015/07/18 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
选购到合适的激光打印机
2022/04/21 数码科技