使用jQuery.form.js/springmvc框架实现文件上传功能


Posted in Javascript onMay 12, 2016

使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。

功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享。

重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="multipart/form-data";

1. 最简单的表单直接提交

html代码:

<body>
<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
<input type="text" name="password">
<input type="file" name="file">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<button id="button">提交</button>
</body>

java代码(具体的springmvc配置,包括文件上传的配置参考https://3water.com/article/84078.htm)

@Controller
@RequestMapping("/fileUpload")
public class FileUpload {
@RequestMapping("/fileUpload")
@ResponseBody
public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){
System.out.println("------------------------------- "+ file.getSize());
if(!file.isEmpty()){
System.out.println("Process file: "+file.getOriginalFilename() );
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}
}
return "NewFile";
}
}

2. 使用jquery.form.js的ajaxSubmit方法

html代码以及java代码保持不变,给id=button的按钮添加事件

$("#button").click(function(){
var hideForm = $('form'); 
var options = { 
dataType : "json", 
/*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/
beforeSubmit : function() { 
alert("正在上传"); 
}, 
success : function(result) { 
alert('成功上传!'); 
}, 
error : function(result) { 
} 
}; 
hideForm.ajaxSubmit(options); 
});

3. 在后台使用一个User对象接收username和password。

<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="submit">
</form>

有可能你会按照下面的步骤做: 封装表单数据作为一个json对象, 给上面的js代码添加data

data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}

在此处其实是画蛇添足,这种情况下发送的请求的详细情况如图:

使用jQuery.form.js/springmvc框架实现文件上传功能

此时页面会报错415。

--------------------------------------------------------------

最合理的代码应该是:html代码与1相同, js代码与2相同, java代码

public String FileUpload1(@RequestParam("file")MultipartFile file, User user){

而且User、前面不能加@RequestBody.。

以上内容是小编给大家介绍的使用jQuery.form.js/springmvc框架实现文件上传功能,希望对大家有所帮助,如果大家想了解更多精彩内容,敬请关注三水点靠木网站!

Javascript 相关文章推荐
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
js中this用法实例详解
May 05 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 #Javascript
深入浅析JavaScript中with语句的理解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
You might like
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP的PDO连接讲解
2019/01/24 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
js创建数组的简单方法
2016/07/27 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python常用函数与用法示例
2019/07/02 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
费用会计岗位职责
2014/01/01 职场文书
《日月潭》教学反思
2014/02/28 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
采购求职信
2014/03/17 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
初中生操行评语大全
2014/04/24 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle