使用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中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
ajax异步请求详解
Jan 06 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 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代码
2013/11/19 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
什么是跨站脚本攻击
2014/12/11 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
住宅质量保证书
2014/04/29 职场文书
爱之链教学反思
2014/04/30 职场文书
技校毕业生自荐信
2014/06/03 职场文书
诚信考试标语
2014/06/24 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android