使用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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php实现求相对时间函数
2015/06/15 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
javascript的函数作用域
2014/11/12 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
个人批评与自我批评
2014/10/15 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers