使用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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现简单轮播图效果
Dec 27 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 加密与解密的斗争
2009/04/17 PHP
php 图片上传类代码
2009/07/17 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python  连接字符串(join %)
2008/09/06 Python
Python库urllib与urllib2主要区别分析
2014/07/13 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
安全宣传标语口号
2014/06/06 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
干部考察材料范文
2014/12/24 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技