使用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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
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/05/16 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
js里的prototype使用示例
2010/11/19 Javascript
js 函数的副作用分析
2011/08/23 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue实现购物车案例
2020/05/30 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
python实现图片批量压缩
2021/04/24 Python