使用jQuery.form.js/springmvc框架实现文件上传功能
作者:ThomasCui 发布时间:2024-04-09 19:46:12
标签:springmvc,文件上传,jquery.form.js
使用的技术有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://www.jb51.net/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"}}
在此处其实是画蛇添足,这种情况下发送的请求的详细情况如图:
此时页面会报错415。
--------------------------------------------------------------
最合理的代码应该是:html代码与1相同, js代码与2相同, java代码
public String FileUpload1(@RequestParam("file")MultipartFile file, User user){
而且User、前面不能加@RequestBody.。
以上内容是小编给大家介绍的使用jQuery.form.js/springmvc框架实现文件上传功能网站!
0
投稿
猜你喜欢
- 目录目标为什么操作步骤工程截图运行效果目标在SpringBoot中集成内存数据库Derby.为什么像H2、hsqldb、derby、sqli
- IDA插件是经过编译的、功能更强大的IDC脚本,与仅仅使用脚本相比,插件能够执行更加复杂的任务。与编写IDC脚本相比,python显得更为轻
- 函数签名对象,表示调用函数的方式,即定义了函数的输入和输出。在Python中,可以使用标准库inspect的一些方法或类,来操作或创建函数签
- 本文实例讲述了Python3变量与基本数据类型用法。分享给大家供大家参考,具体如下:3.1保留字和标识符3.1.1保留字 &nb
- 一般做法都是用aspjpeg的组件,这里有份用法说明,看一下吧。aspjpeg是一款非常强大的图片处理组件,纯英文版本。不过早已经有免费版和
- Python中的random函数random模块提供生成伪随机数的函数,在使用时需要导入random模块1. random.random()
- 前言全局共享内存则主要是 MySQL Instance(mysqld进程)以及底层存储引擎用来暂存各种全局运算及可共享的暂存信息,如存储查询
- 前言读取站点资料数据对站点数据进行插值,插值到规则网格上绘制EOF第一模态和第二模态的空间分布图绘制PC序列关于插值,这里主要提供了两个插值
- ajax.html <html><head> <met
- 每当有朋友过生日时,生日蛋糕自然是必不可少的,今天我们来看一下如何用 Python 画一个生日蛋糕。本文我们用到的 Python 库包括:t
- 1. 打开Anaconda Prompt(在命令行格式下,输入代码,建立pytorch环境、安装pytorch、测试pytorch过程)2.
- 前言还是之前说的项目,环境目前已经准备好了,项目准备验证阶段发现了一个问题,从上层应用输入鉴权访问应用,一直在等待状态,输入了正确的用户名及
- 1、通过复制数据构造张量1.1 torch.tensor()torch.tensor([[0.1, 1.2], [2.2, 3.1], [4
- Python中包含了许多内建的语言特性,它们使得代码简洁且易于理解。这些特性包括列表/集合/字典推导式,属性(property)、以及装饰器
- networkx返回图的邻接矩阵最近有用到关于邻接矩阵的一些问题,平时不太常用所以一直没注意到networkx里面的函数,权当笔记了,有兴趣
- Linux中进程的通信方式有信号,管道,共享内存,消息队列socket等。其中管道是*nix系统进程间通信的最古老形式,所有*nix都提供这
- createTrackbar是Opencv中的API,其可在显示图像的窗口中快速创建一个滑动控件,用于手动调节阈值,具有非常直观的效果。具体
- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行,并可动态生成普通的HTML网页,然后再传送到客户端供浏览的这一特点。我们要在本机上
- asp日期转换星座函数,参数是日期型function astro(birth)astro=""if
- 目录1、简单循环 Simple loops2、简单循环但是使用了线程Simple loops but threaded3、定时调度库 Sch