使用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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
微信小程序的引导页实现代码
Jun 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函数
2010/01/11 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python类装饰器用法实例
2015/06/04 Python
python动态网页批量爬取
2016/02/14 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
opencv+python实现均值滤波
2020/02/19 Python
python 调整图片亮度的示例
2020/12/03 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
财务会计毕业生自荐信
2013/11/02 职场文书
怎样写演讲稿
2014/01/04 职场文书
2014年销售部工作总结
2014/12/01 职场文书
学生逃课检讨书
2015/02/17 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers