使用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 Throttle &amp; Debounce应用介绍
Mar 19 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
js实现批量删除功能
Aug 27 Javascript
JavaScript 数组去重详解
Sep 15 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python笔记之工厂模式
2019/11/20 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
StringBuilder和String的区别
2015/05/18 面试题
创建精神文明单位实施方案
2014/03/08 职场文书
小学优秀学生评语
2014/12/29 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
无工作证明怎么写
2015/06/15 职场文书
生活小常识广播稿
2015/08/19 职场文书
《称赞》教学反思
2016/02/17 职场文书