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
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
理解javascript异步编程
2016/01/27 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python复数属性和方法运算操作示例
2017/07/21 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
一行python实现树形结构的方法
2019/08/09 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
C语言中break与continue的区别
2012/07/12 面试题
饮料业务员岗位职责
2013/12/15 职场文书
老师给学生的表扬信
2014/01/17 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
教师节倡议书
2014/08/30 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
导游词之山东孔庙
2019/11/04 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Android自定义双向滑动控件
2022/04/19 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers