- 上传功能是web工程常见的功能,spring mvc框架简化了文件上传的代码
1 原生态方式上传
从request.getInputStream中获取流数据请求体中的数据
2 spring mvc方式上传
1 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文件上传</title>
</head>
<body>
<!--表单上传文件方法必须是post 数据放到请求体中 get请求没有请求体 数据传输量很小
enctype编码方式 是设置提交数据的格式 默认会对字符进行编码
multipart/form-data是代表上传二进制文件 不对字符进行编码
-->
<form action="http://localhost:8080/info/fileUpload" method="post" enctype="multipart/form-data">
选择文件上传：<input type="file" name="upload"/>
<input type="submit" value="ok"/>
</form>
</body>
</html>
2 后端
//文件上传
@RequestMapping("/fileUpload")
@ResponseBody
//这个参数名字必须和form表单的名字一样
public String fileUpload(MultipartFile upload,HttpServletRequest request) throws IOException {
System.out.println("进入了");
//创建文件夹
File file = new File("E:\\io");
if(!file.exists()){
file.mkdirs();
}
//拿到上传数据 文件名
String originalFilename = upload.getOriginalFilename();
//生成不同的名字
String filename = UUID.randomUUID()+""+ originalFilename;
//创建一个空文件
File newFile = new File(file,filename);
//将数据存放到空文件中
upload.transferTo(newFile);
return "index";
}
3 配置文件
spring:
servlet:
multipart:
max-request-size: 100MB
max-file-size: 100MB
-多文件上传
1 前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文件上传</title>
</head>
<body>
<!--多文件上传
-->
<form action="http://localhost:8080/info/fileUpload2" method="post" enctype="multipart/form-data">
用户名：<input name="username"/>
选择文件上传1：<input type="file" name="upload"/>
选择文件上传2：<input type="file" name="upload"/>
<input type="submit" value="ok"/>
</form>
</body>
</html>
2 代码
//文件上传
@RequestMapping("/fileUpload2")
@ResponseBody
//这个参数名字必须和form表单的名字一样
public String fileUpload2(String username,MultipartFile[] upload,HttpServletRequest request) throws IOException {
System.out.println("进入了");
System.out.println("输出表单参数"+username);
//创建文件夹
File file = new File("E:\\io");
if(!file.exists()){
file.mkdirs();
}
//遍历数组 将上传的文件保存到文件夹中
for(MultipartFile files :upload){
String originalFilename = files.getOriginalFilename();
originalFilename = UUID.randomUUID()+"_"+originalFilename;
//创建空文件
File newfile = new File(file,originalFilename);
files.transferTo(newfile);
}
return "ok";
}
3 异步上传
上传之后会跳转页面,但是有时候不需要跳转页面而是进行局部刷新，如：上传头像
异步上传不是表单提交而是ajax请求,想要发送ajax请求吧文件数据带上就必须用到jQuery.form.js工具
1 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文件上传</title>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/jquery.form.min.js"></script>
</head>
<body>
<!--异步上传
表单不需要写action 因为不是同步请求
-->
<form id="ajaxForm" method="post" enctype="multipart/form-data">
用户名：<input name="username"/>
选择文件上传1：<input type="file" name="file"/>
<!--按钮类型不能是submit,否则会刷新页面-->
<input type="button" value="ok" id="btn"/>
</form>
<hr/>
<!--头像预览图-->
<img src="/" width="100px" id="header"/>
<img src="http://localhost:8080/1.jpg" width="100px" id="header1"/>
<script>
/*文档就绪函数*/
$(function () {
alert("哈哈");
//表单的异步提交
$("#btn").click(function (){
alert("哈哈1");
//异步提交表单
$("#ajaxForm").ajaxSubmit({
url:"/info/fileUpload4",
type:"post",
success:function (data){
alert("哈哈2");
$("#header").attr("src",data);
}
})
})
})
</script>
</body>
</html>
2 后端
//文件上传
@RequestMapping("/fileUpload4")
@ResponseBody
//这个参数名字必须和form表单的名字一样
public String fileUpload4(String username,MultipartFile file,HttpServletRequest request) throws IOException {
System.out.println("进入了111");
System.out.println("输出表单参数"+username);
//创建文件夹
String realPath = request.getSession().getServletContext().getRealPath("/upload");
File dir = new File(realPath);
if(!dir.exists()){
dir.mkdirs();
}
//将上传的数据写到文件夹中
String originalFilename = file.getOriginalFilename();
originalFilename = UUID.randomUUID()+"_"+originalFilename;
//创建空文件夹
File file1 = new File(dir, originalFilename);
//将传输的数据文件给到目录中
file.transferTo(file1);
//返回文件路径
return "/upload/"+originalFilename;
}
- 4 跨服务器上传
一般上传文件都会放到其他文件服务器中，不会放到项目服务器中,
1.设置tomcat作为图片服务器,再tomcat服务器中webapps目录下创建upload目录作为跨服务器存放文件目录
2.修改tomcat的conf/web.xml设置支持跨服务器上传,只读属性为false
<servlet>
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
3修改端口conf/server.xml
<Connector port="8081" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
4启动图片服务器
5导入依赖
<!--跨服务器上传文件依赖-->
<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-core -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-core</artifactId>
<version>1.18.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-client -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.18.1</version>
</dependency>
6 前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文件上传</title>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/jquery.form.min.js"></script>
</head>
<body>
<!--异步上传
表单不需要写action 因为不是同步请求
-->
<form id="ajaxForm" method="post" enctype="multipart/form-data">
用户名：<input name="username"/>
选择文件上传1：<input type="file" name="file"/>
<!--按钮类型不能是submit,否则会刷新页面-->
<input type="button" value="ok" id="btn"/>
</form>
<hr/>
<!--头像预览图-->
<img src="/" width="100px" id="header"/>
<script>
/*文档就绪函数*/
$(function () {
alert("哈哈");
//表单的异步提交
$("#btn").click(function (){
alert("哈哈1");
//异步提交表单
$("#ajaxForm").ajaxSubmit({
url:"/info/fileUpload5",
type:"post",
success:function (data){
alert("哈哈2");
$("#header").attr("src",data);
}
})
})
})
</script>
</body>
</html>
7后端代码
//跨服务器上传
@RequestMapping("/fileUpload5")
@ResponseBody
//这个参数名字必须和form表单的名字一样
public String fileUpload5(String username,MultipartFile file,HttpServletRequest request) throws IOException {
System.out.println("进入了跨服务器上传");
//设置跨服务器上传的路径
String path = "http://localhost:8081/upload/";
//获取上传文件名字
String originalFilename = file.getOriginalFilename();
originalFilename = UUID.randomUUID()+"_"+originalFilename;
//开始跨服上传
// 1创建客户端对象
Client client = Client.create();
//2使用客户端对象连接图片服务器
WebResource resource = client.resource(path + originalFilename);
//3数据传输
resource.put(file.getBytes());
//4 返回文件的路径
return path+originalFilename;
}
- 下载文件
1 spring boot 项目可以直接访问的资源目录是resources/static
2 存放到templates目录下是需要控制器来实现跳转的
- 代码
//下载文件 http://localhost:8080/downloadFile?filename=变脸.jpg
@RequestMapping("/downloadFile")
public void fileDown(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,String fileName) throws IOException {
//获取文件的名称
String filename = httpServletRequest.getParameter("filename");
System.out.println(filename);
String kepaname = filename;
//get请求中---解决文件名中文乱码问题
//filename =new String(filename.getBytes("ISO-8859-1"),"UTF-8");//乱码.png
//告知浏览器文件的类型(响应体）
httpServletResponse.setContentType(httpServletRequest.getServletContext().getMimeType(filename));
//设置响应头
httpServletResponse.setHeader("Content-Disposition","attachment;filename="+kepaname);
//文件位置
System.out.println("文件名"+kepaname);
String name = "变脸.jpg";
File file3 = new File("E:\\ps",name);
File file = new File("E:\\ps",kepaname);
System.out.println(file.isFile());
//获取字节输出流
ServletOutputStream outputStream = httpServletResponse.getOutputStream();
//把文件写出去
outputStream.write(FileUtils.readFileToByteArray(file));
outputStream.flush();
outputStream.close();
}
2776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
