使用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使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
vue修改Element的el-table样式的4种方法
Sep 17 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
php实例化一个类的具体方法
2019/09/19 PHP
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
wxPython 入门教程
2008/10/07 Python
python实现数组插入新元素的方法
2015/05/22 Python
python操作 hbase 数据的方法
2016/12/18 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
python怎么对数字进行过滤
2020/07/05 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
实习单位推荐信
2015/03/27 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2016高考寄语集锦
2015/12/04 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP