使用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 相关文章推荐
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 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 获取SWF动画截图示例代码
2014/02/10 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python中的二维列表实例详解
2018/06/19 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
yy婚礼司仪主持词
2014/03/14 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
节水标语大全
2014/06/11 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python