实现文件上传和回显
1、新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 。pow.xml文件下的依赖如下
2、根据下图,创建如下文件
3、直接上代码
配置文件 application.xml
server:
port: 8005
file:
upload:
path: F://upload/
relationImg: /images/
配置类 MyWenMvcConfigurer.java
/** 资源映射路径 */
@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {
/** 保存的真实地址 */
@Value("${file.upload.path}")
String sysPath;
/** 请求的相对地址 */
@Value("${file.upload.relationImg}")
String relationImg;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/** 将相对地址映射到真实地址 */
registry.addResourceHandler(relationImg+"**").addResourceLocations("file:/"+sysPath+relationImg);
}
}
服务层接口 UploadService.java
public interface UploadService {
/** 保存文件并返回文件的相对路径 */
public String uploadImg(MultipartFile file);
}
服务层实现类 UploadServiceImpl.java
@Service
public class UploadServiceImpl implements UploadService {
@Value("${file.upload.path}")
String sysPath;
@Value("${file.upload.relationImg}")
String relationImg;
@Override
public String uploadImg(MultipartFile file) {
//uuid生成的唯一前缀 + 上传文件名 构成唯一的新文件名
String fileName= UUID.randomUUID()+"_"+file.getOriginalFilename();
//文件保存路径
String path=sysPath+relationImg;
//新建文件filepath
File filepath=new File(path,fileName);
//判断路径是否存在,如果不存在就创建一个
if(!filepath.getParentFile().exists()){
filepath.getParentFile().mkdirs();
}
try {
//将上传的文件file写入文件filepath
file.transferTo(new File(path+File.separator+fileName));
}catch (IOException e){
e.printStackTrace();
}
//将请求文件的相对路径返回
return relationImg+fileName;
}
}
控制类 UploadController.java
@Controller
public class UploadController {
@Autowired
UploadService uploadService;
@GetMapping("/uploadImg")
public String getuploadImg(){
return "/upload/uploadImg";
}
@PostMapping("/uploadImg")
public String uploadImg(@RequestParam("file")MultipartFile file, Model model){
String imgUrl=uploadService.uploadImg(file);
model.addAttribute("imgUrl",imgUrl);
return "/upload/uploadImg";
}
}
视图层 uploadImg.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>图片上传并回显</title>
</head>
<body>
<form action="/uploadImg" enctype="multipart/form-data" method="post">
<input type="file" accept="image/*" name="file">
<input type="submit" value="上传" style="background-color: antiquewhite">
</form>
图片地址:[[${imgUrl}]]
<br>
<img th:src="@{${imgUrl}}" style="width: 200px;height: 200px;border-radius: 20px;">
</body>
</html>
效果图:
真实保存路径:F:\upload\images
注意下面两张图的名字,第一张多了的前缀就是 UUID.randomUUID() 生成的,为了保证文件名的唯一性
单文件上传
控制层 FileController.java
@Controller
public class FileController {
//单文件上传页面跳转
@GetMapping("/singleUpload")
public String singleUpload(){
return "singleUpload";
}
//单文件上传管理
@PostMapping("/singleUploadFile")
public String singleUploadFile(HttpServletRequest httpServletRequest, MultipartFile file, Model model) throws IOException {
//获取文件名以及后缀名
String fileName=file.getOriginalFilename();
//重新生成文件名(根据具体情况生成对应文件名)
fileName= UUID.randomUUID()+"_"+fileName;
//指定上传文件本地存储目录,不存在需要提前创建
String dirPath="F:/file/";
File filePath=new File(dirPath);
//指定上传文件本地存储目录,不存在需要提前创建
if(!filePath.exists()){
filePath.mkdirs();
}
try{
//将文件写入磁盘
file.transferTo(new File(dirPath,fileName));
model.addAttribute("uploadStatus","上传成功");
}catch (Exception e){
e.printStackTrace();
model.addAttribute("uploadStatus","上传失败:"+e.getMessage());
}
//将带上传状态信息回调到文件上传页面
return "singleUpload";
}
}
singleUpload.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>单文件上传</title>
<link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
<script th:src="@{/js/jquery/min.js}"></script>
</head>
<body>
<div th:if="${uploadStatus}" style="color:red;font-size: large" th:text="${uploadStatus}">上传成功!</div>
<form th:action="@{/singleUploadFile}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>单文件上传</label>
<input class="form-control-file" type="file" name="file" required="required">
</div>
<input id="submit" type="submit" value="上传">
</form>
</body>
</html>
效果图:
点击上传后
保存地址
多文件上传
控制层 FileController.java
@Controller
public class FileController {
//多文件上传页面跳转
@GetMapping("/mutiUpload")
public String mutiUpload(){ return "mutiUpload";}
//多文件上传管理
@PostMapping("/mutiUploadFile")
public String mutiUploadFiles(MultipartFile[] files,Model model){
for(MultipartFile file:files){
String fileName=file.getOriginalFilename();
fileName=UUID.randomUUID()+"_"+fileName;
String dirPath="F:/file/";
File filePath=new File(dirPath);
if(!filePath.exists()){
filePath.mkdirs();
}
try{
file.transferTo(new File(dirPath+fileName));
model.addAttribute("uploadStatus","上传成功");
} catch (IOException e) {
e.printStackTrace();
model.addAttribute("uploadStatus","上传失败");
}
}
return "mutiUpload";
}
}
mutiUpload.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>动态添加文件上传列表</title>
<link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
</head>
<body>
<div th:if="${uploadStatus}" style="color:red;" th:text="${uploadStatus}">上传成功</div>
<form th:action="@{/mutiUploadFile}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>动态添加文件上传</label>
<input type="button" value="添加文件" onclick="add()"/>
<div id="file" class="" th:value="文件上传区域"></div>
</div>
<input id="submit" type="submit" value="上传" style="display: none;margin-top:10px;">
</form>
<script>
//动态添加上传按钮
function add() {
var innerdir="<div>"+
"<input type='file' style='margin:5px;' name='files' required='required'>"+
"<input type='button' value='删除' onclick='remove(this)'>"+
"</div>"
$("#file").append(innerdir);
$("#submit").css("display","block");
}
function remove(obj) {
$(obj).parent().remove();
if($("#file div").length==0){
$("#submit").css("display","none");
}
}
</script>
</body>
</html>
效果图:
点击上传后:
保存的地址:
Ajax异步文件上传
控制层
@Controller
public class FileController {
//ajax文件上传页面跳转
@GetMapping("/ajaxUpload")
public String ajaxUpload(){return "ajaxUpload";}
//ajax文件上传管理
@ResponseBody
@PostMapping("/ajaxUploadFile")
public Map ajaxUploadFile(MultipartFile[] files){
Map<String,Object> map=new HashMap<>();
map.put("test","test");
for(MultipartFile file:files){
String fileName=file.getOriginalFilename();
fileName=UUID.randomUUID()+"_"+fileName;
String dirPath="F:/file/";
File filePath=new File(dirPath);
if(!filePath.exists()){
filePath.mkdirs();
}
try{
file.transferTo(new File(dirPath+fileName));
map.put("msg","上传成功");
} catch (Exception e) {
e.printStackTrace();
map.put("msg","上传失败");
}
}
return map;
}
}
视图层
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>异步无刷文件上传</title>
<link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
</head>
<body>
<form id="form">
<div class="form-group">
<label>异步无刷文件上传</label>
<input type="button" value="添加文件" onclick="add()"/>
<div id="file" class="" th:value="文件上传区域"></div>
</div>
<input id="submit" type="button" value="上传" onclick="ajaxUpload()" style="display: none;margin-top:10px;">
</form>
<script>
function ajaxUpload() {
var form=new FormData();
//获取选择的文件
$.each($('input[name="files"]'),function(index,item){
form.append("files",item.files[0])
});
$.ajax({
method: 'post',
url: '/ajaxUploadFile',
data: form,
processData: false,
contentType: false,
success: function (res) {
alert(res.msg);
},
error: function () {
console.log("ajax请求失败");
}
});
}
//动态添加上传按钮
function add() {
var innerdir="<div>"+
"<input type='file' style='margin:5px;' name='files' required='required'>"+
"<input type='button' value='删除' onclick='remove(this)'>"+
"</div>"
$("#file").append(innerdir);
$("#submit").css("display","block");
}
function remove(obj) {
$(obj).parent().remove();
if($("#file div").length==0){
$("#submit").css("display","none");
}
}
</script>
</body>
</html>
效果图:
保存地址
参考:JavaEE实验9(单文件上传\多文件上传\ajax异步文件上传)
文档:
链接:https://pan.baidu.com/s/1zb9UsQz_uXU5b_BAOQr6PQ
提取码:9eim
源码:
链接:https://pan.baidu.com/s/1Tvw7y0PwLylBGDUPLu--ww
提取码:09u1