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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
微信小程序实现工作时间段选择
Feb 15 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python爬虫框架Scrapy实例代码
2018/03/04 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
工程地质勘察专业大学生求职信
2013/10/13 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
气象学专业个人求职信
2014/04/22 职场文书
团日活动总结怎么写
2014/06/25 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
php 原生分页
2021/04/01 PHP
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis