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 相关文章推荐
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
Node.js笔记之process模块解读
May 31 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python shutil模块用法实例分析
2019/10/02 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
法学专业应届生求职信
2013/10/16 职场文书
服装店营销方案
2014/03/10 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
初中团支书竞选稿
2015/11/21 职场文书
初二物理教学反思
2016/02/19 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS