使用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 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
常规表格多表头查询示例
Feb 21 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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 session和cookie使用说明
2010/04/07 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
python pdb调试方法分享
2014/01/21 Python
python求列表交集的方法汇总
2014/11/10 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
浅谈Django的缓存机制
2018/08/23 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python实现银行管理系统
2019/10/25 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
助理政工师申报材料
2014/06/03 职场文书
超市促销活动总结
2014/07/01 职场文书
2014年残联工作总结
2014/11/21 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS