使用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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
浅谈JavaScript 声明提升
Sep 14 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP图片上传代码
2013/11/04 PHP
PHP合并静态文件详解
2014/11/14 PHP
php检查页面是否被百度收录
2015/10/28 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
javascript hashtable实现代码
2009/10/13 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
matplotlib实现区域颜色填充
2019/03/18 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python如何修改文件时间属性
2021/02/05 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
护理自荐信
2013/10/22 职场文书
生产部管理制度
2014/01/31 职场文书
八年级语文教学反思
2014/02/11 职场文书
施工协议书范本
2014/04/22 职场文书
努力学习演讲稿
2014/05/10 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
入团申请书格式
2019/06/20 职场文书
创业计划书之家教托管
2019/09/25 职场文书