使用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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
原生js实现放大镜特效
Mar 08 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
vue实现简单的日历效果
Sep 24 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项目打包方法
2008/02/18 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jQuery下的动画处理总结
2013/10/10 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
轮播的简单实现方法
2016/07/28 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
vue-music关于Player播放器组件详解
2017/11/28 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
python验证码识别的示例代码
2017/09/21 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
对python周期性定时器的示例详解
2019/02/19 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
小学教师岗位职责
2013/11/25 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
公司门卫岗位职责
2015/04/13 职场文书
关于童年的读书笔记
2015/06/26 职场文书
跳高加油稿
2015/07/21 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers