使用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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php绘制一个矩形的方法
2015/01/24 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python使用zip将list转为json的方法
2018/12/31 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python实发邮件实例详解
2019/11/11 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
远程调用的原理
2014/07/05 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
个人求职信范文分享
2014/01/31 职场文书
文秘求职信范文
2014/04/10 职场文书
社区平安建设方案
2014/05/25 职场文书
2014年文员工作总结
2014/11/18 职场文书
房产公证书样本
2015/01/23 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
《詹天佑》教学反思
2016/02/20 职场文书