基于SSM的照片添加照片删除Demo

1:环境

Maven工程
Spring
SpringMVC
MyBatis
LomBok
thymeleaf
文件上传解析器

两个小小的功能,主要是实现文件上传。
在这里插入图片描述

2:Maven依赖

    <!--文件上传依赖-->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

3:主要的代码

SpringMVC依赖文件上传解析器上传文件:
以照片为例子,上传后的照片存于target中,而照片名字通过uuid和照片后缀组合而成。数据库存储的照片类路径是 imgs/照片名,页面直接就可以访问到照片。
在这里插入图片描述

照片上传前台页面:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--文件上传-->
<form th:action="@{/add}" method="post" enctype="multipart/form-data">
    PhotoName:<input type="text" name="imgName">
    Photo:<input type="file" name="photoImgFile"><br>
    <input type="submit" value="add">
</form>

</body>
</html>

Ctroller层:

 @RequestMapping(value = "/add")
    public String addImg(String imgName, MultipartFile photoImgFile, HttpServletRequest request){
        Photo photo=new Photo();
        photo.setImgName(imgName);
        photo = photoUp.upPhoto(photo, photoImgFile, request);
        photoService.AddPhoto(photo);
        return "redirect:/";
    }

文件上传解析工具类:

@Component
public class PhotoUp {

        public Photo  upPhoto(Photo photo, MultipartFile photoImgFile, HttpServletRequest request){


            //1:获取上传文件的文件名
            String originalFilename =photoImgFile.getOriginalFilename();

            //2:通过文件名截取文件后缀
            String suffixName=originalFilename.substring(originalFilename.lastIndexOf('.'));

            //3:使用UUID+后缀生成文件名
            String fileName= UUID.randomUUID().toString()+suffixName;

            //4:获取imgs目录在服务器路径 如果imgs没有任何内容,则target没有imgs目录
            String imgsPath=request.getServletContext().getRealPath("imgs");

            //5:判断imgs路径是否存在,如果imgs目录不存在则创建imgs目录
            File file=new File(imgsPath);
            if(!file.exists()){
                file.mkdir();
            }

            //6:保存文件  文件保存路径+File.separator(分隔符)+文件名
            String FinalPath=imgsPath+File.separator+fileName;

            try {
                photoImgFile.transferTo(new File(FinalPath));
            } catch (IOException e) {
                e.printStackTrace();
            }
            //7:设置Book对象的封面信息(即服务器访问路径 imgs+文件名)
            photo.setImgPath("imgs/"+fileName);

            //8:文件上传日期
            Date date=new Date();
            java.sql.Date newDate=new java.sql.Date(date.getTime());
            photo.setImgDate(newDate);

            return photo;

        }

}


照片展示页面:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<table id="dataTable" border="1" cellspacing="0" style="text-align: center">

  <tr>
    <th colspan="5">img</th>
  </tr>
  <tr>
    <th>id</th>
    <th>imgName</th>
    <th>imgDate</th>
    <th>img</th>
    <th>options(<a th:href="@{/toAdd}">add</a> )</th>
  </tr>
    <!--循环遍历所有照片-->
    <tr th:each="photo:${photos}">
    <td th:text="${photo.imgId}"></td>
    <td th:text="${photo.imgName}"></td>
    <td th:text="${photo.imgDate}"></td>
    <td >
      <!--数据库保存的imgPath=imgs/xxx.jpg 直接可以访问到照片-->
      <img th:src="${photo.imgPath}" width="280px" height="280px">
    </td>
    <td>
      <!--删除照片,参数id为url的一部分 比如删除Id为1的照片 /del/1 -->
      <a th:href="@{'/del/'+${photo.imgId}}">delete</a>
    </td>
  </tr>
</table>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值