简单的文件上传
1.引入我们的multiPartFile依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
2.编写前端页面 index.html
这里有俩个需要注意点
在我们的form标签当中 需要指定编码类型 和指定请求方式
enctype="multipart/form-data" method="post"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">
<!-- .panel-heading 面板头信息。 -->
<div class="panel-heading">
<!-- .panel-title 面板标题。 -->
<h3 class="panel-title">文件上传下载示例：简单文件上传</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-horizontal" action="upload" enctype="multipart/form-data" method="post">
<div class="form-group">
<div class="input-group col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<input class="form-control" placeholder="文件描述" type="text" name="description" />
</div>
</div>
<div class="form-group">
<div class="input-group col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input class="form-control" placeholder="请选择文件" type="file" name="file"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<div class="btn-group btn-group-justified" >
<div class="btn-group" >
<button type="submit" class="btn btn-success" id="submitbtn">
<span class="glyphicon glyphicon-share"></span> 文件上传</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
页面效果
3.编写controller
package com.cz.testfile.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
@Controller
public class multiPartFile {
@GetMapping("/index")
public String index(){
return "index";
}
@PostMapping ("/upload")
public String upload(HttpServletRequest request,
@RequestParam("description") String description,
@RequestParam("file") MultipartFile file
) throws IOException {
System.out.println("文件的描述是"+description);
if (!file.isEmpty()){
//设置文件保存的路径
String path=request.getServletContext().getRealPath("/upload/");
System.out.println(path);
//获取文件名
String filename = file.getOriginalFilename();
//在path目录下新建一个 文件
File filepath = new File(path,filename);
//如果文件目录不存在
if (!filepath.getParentFile().exists()){
filepath.getParentFile().mkdir();
}
//这一步代码就是上传文件的
//其实 File.separator 的作用相当于 ' \ '
file.transferTo(new File(path+File.separator+filename));
return "index";
}
return "error";
}
}
默认文件超过1M会报错 在配置文件中配置一下就可以了
# Single file max size
spring.http.multipart.maxFileSize=50MB
# All files max size
spring.http.multipart.maxRequestSize=50MB
使用对象方式接受上传的文件
1.同上，需要先导入依赖
2.编写页面registerForm
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>文件上传下载示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">
<!-- .panel-heading 面板头信息。 -->
<div class="panel-heading">
<!-- .panel-title 面板标题。 -->
<h3 class="panel-title">文件上传下载示例：用户注册</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-horizontal" action="register" enctype="multipart/form-data" method="post">
<div class="form-group">
<div class="input-group col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" placeholder="用户名" type="text" name="username" />
</div>
</div>
<div class="form-group">
<div class="input-group col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input class="form-control" placeholder="请选择头像" type="file" name="headPortrait"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<div class="btn-group btn-group-justified" >
<div class="btn-group" >
<button type="submit" class="btn btn-success" id="submitbtn">
<span class="glyphicon glyphicon-share"></span> 注册</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
页面效果如下
3.编写对应的实体类
package com.cz.testfile.pojo;
import org.springframework.web.multipart.MultipartFile;
import java.io.Serializable;
public class User implements Serializable {
private String username;
private MultipartFile headPortrait;
public User() {
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public MultipartFile getHeadPortrait() {
return headPortrait;
}
public void setHeadPortrait(MultipartFile headPortrait) {
this.headPortrait = headPortrait;
}
}
4.编写对应的controller
package com.cz.testfile.controller;
import com.cz.testfile.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.lang.reflect.Field;
@Controller
public class FileUpload {
@RequestMapping("/register")
public String register(HttpServletRequest request,
// 将我们表单的属性与这个对象进行绑定
@ModelAttribute User user,
Model model
) throws IOException {
System.out.println("username="+user.getUsername());
//先判断是否获取到了文件
if (!user.getHeadPortrait().isEmpty()){
String path=request.getServletContext().getRealPath("/upload/");
System.out.println(path);
String fileName=user.getHeadPortrait().getOriginalFilename();
//创建文件目录和文件
File filepath = new File(path,fileName);
if (!filepath.getParentFile().exists()){
filepath.getParentFile().mkdir();
}
//将文件输入到上面指定目录的文件里
user.getHeadPortrait().transferTo(new File(path+File.separator+fileName));
//将用户的信息添加到model
model.addAttribute("user",user);
return "userInfo";
}
return "error";
}
@GetMapping("/two")
public String registerFrom(){
return "registerFrom";
}
}
页面如下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>文件上传下载示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">
<!-- .panel-heading 面板头信息。 -->
<div class="panel-heading">
<!-- .panel-title 面板标题。 -->
<h3 class="panel-title">文件上传下载示例：文件下载</h3>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- .panel-heading 面板头信息。 -->
<div class="panel-heading">
<!-- .panel-title 面板标题。 -->
<h3 class="panel-title">用户信息列表</h3>
</div>
<div class="panel-body">
<div class="table table-responsive">
<table class="table table-bordered table-hover" >
<tbody class="text-center">
<tr>
<td><img th:src="@{'upload/'+${user.headPortrait.originalFilename}}" height="30"/></td>
<td th:text="${user.username}">用户名</td>
<td >
<a th:href="@{download(filename=${user.headPortrait.originalFilename })}">下载头像</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
最终效果
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
