jQuery Ajax使用FormData对象上传文件的方法


Posted in Javascript onSeptember 07, 2016

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件。

使用<form>表单初始化FormData对象方式上传文件

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>

javascript代码

$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});

这里要注意几点:

processData设置为false。因为data值是FormData对象,不需要对数据做处理。

<form>标签添加enctype="multipart/form-data"属性。

cache设置为false,上传文件不需要缓存。

contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。 如果不是用<form>表单构造FormData对象又该怎么做呢?

使用FormData对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>

这里没有<form>标签,也没有enctype="multipart/form-data"属性。 javascript代码

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});

这里有几处不一样:

append()的第二个参数应是文件对象,即$('#file')[0].files[0]。

contentType也要设置为‘false'。 从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件, 只需要在<input type="file">里添加multiple或multiple="multiple"属性。

jQuery Ajax使用FormData对象上传文件的方法

后台接收文件:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
</bean>
@RequestMapping(value = "/import_tg_resource")
public ModelAndView import_tg_resource(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request, ModelMap model) {
System.out.println("开始批量上传:文件数量:" + files.length);
for (MultipartFile file : files ) {
String path = request.getSession().getServletContext().getRealPath("upload");
String fileName = file.getOriginalFilename();
String prefix = fileName.substring(fileName.lastIndexOf("."));
fileName = new Date().getTime() + prefix;
// System.out.println("保存路径 " + path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
file.transferTo(targetFile);
}
}

以上所述是小编给大家介绍的jQuery Ajax使用FormData对象上传文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JavaScript继承方式实例
Oct 29 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
js propertychange和oninput事件
Sep 28 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
浅谈node.js中间件有哪些类型
Apr 29 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 #Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 #Javascript
JS实现页面载入时随机显示图片效果
Sep 07 #Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
You might like
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
yii实现创建验证码实例解析
2014/07/31 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python开发简易版在线音乐播放器
2017/03/03 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python中有几个关键字
2020/06/04 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
幼儿园小班教师寄语
2014/04/03 职场文书
五心教育心得体会
2014/09/04 职场文书
农村文化建设标语
2014/10/07 职场文书
会议邀请函
2015/01/30 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android