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 27 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
js控制frameSet示例
Sep 10 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JS实现放烟花效果
2020/03/10 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
料理师求职信
2014/01/30 职场文书
结婚喜宴主持词
2014/03/14 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫