使用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和ajax代替iframe的方法(详解)
Apr 12 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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/28 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
document.forms[].submit()使用介绍
2014/02/19 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
js随机生成一个验证码
2017/06/01 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
公司庆典邀请函范文
2014/01/13 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
基于Python实现nc批量转tif格式
2022/08/14 Python