使用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 28 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现放大镜案例
Oct 19 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP实现变色验证码实例
2014/01/06 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Python3遍历目录树实现方法
2015/05/22 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python 求定积分和不定积分示例
2019/11/20 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
毕业生就业自荐书
2013/12/15 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
尊师重教演讲稿
2014/09/04 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技