SpringBoot+Thymeleaf实现图片上传和显示

1.导入两个图片上传所需要的依赖，查看自己是否已经导入。

 <!--图片上传依赖--><dependency><groupId>com.alibaba</groupId>  <artifactId>fastjson</artifactId><version>1.2.75</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency>

2.添加本地图片映射在application启动类中添加：


@SpringBootApplication
@MapperScan("com.example.mapper")
public class MybatisplusApplication implements WebMvcConfigurer {public static void main(String[] args) {SpringApplication.run(MybatisplusApplication.class, args);}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/**  资源映射路径*  addResourceHandler:访问映射路径*  addResourceLocations:资源的绝对路径*/registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/ruoyi/mybatisplus/src/main/resources/static/img/");}
}

3.html主页面
<td><img th:src="@{${a.file}}" width="90" height="80"></td>图片显示

<!DOCTYPE html>
<head><meta charset="utf-8"/><title>图片上传</title>
</head>
<body xmlns:th="http://www.w3.org/1999/xhtml">
<div><table border="1px" width="200px" cellspacing="0"><a th:href="@{/user/toAdd}">添加</a><br/><tr><td>id</td><td>账号</td><td>密码</td><td>图片上传</td></tr><tr th:each="a:${a}"><td th:text="${a.id}"></td><td th:text="${a.userName}"></td><td th:text="${a.password}"></td><td><img th:src="@{${a.file}}" width="90" height="80"> </td></tr></table>
</div>
</body>
</html>

4.html添加页面
<input name="file" id="file1" type="hidden"> 这的name是向后端数据库添加的
<input type="file" id="file">这是下面jq进行操作用的
----------------图片上传记得导入jq依赖----------------

  <tr><td><input name="file" id="file1"  type="hidden"><input type="file"  id="file"><p id="url"><img src="" width=200></p><input type="button" id="button" value="上传" ><input type="button" id="t_button" value="取消上传" ></td></tr>

$(function () {$("#button").click(function () {var form = new FormData();form.append("file", document.getElementById("file").files[0]);$.ajax({url: "/user/upload",        //后台urldata: form,cache: false,async: false,type: "POST",                   //类型，POST或者GETdataType: 'json',              //数据返回类型，可以是xml、json等processData: false,contentType: false,success: function (data) {      //成功，回调函数if (data) {var pic="/imctemp-rainy/"+data.fileName;alert(pic);$("#url img").attr("src",pic);$("#file1").val("/imctemp-rainy/"+data.fileName)// alert(JSON.stringify(data));} else {alert("失败");}},error: function (er) {          //失败，回调函数alert(JSON.stringify(data));}});});$("#t_button").click(function () {//这里分割字符串 /imctemp-rainy/157352875235607c10257539a5f4dcdaab233ca2832a5.jpg//需要用/分割字符先后获取最后一段字符串去上传到后台//alert($("#url img").attr("src"));var img = $("#url img").attr("src");var str = img.split("/");var str_img=str[str.length-1];//alert(str_img);$.post("/user/deleteImages",{filePath:str_img},function(data){alert(data);//这里我们取消上传成功之后去给换成一个暂无图片的一个图$("#url img").attr("src","/imctemp-rainy/11.jpg");$("#file1").val("/imctemp-rainy/11.jpg");});});})

5.控制器中图片上传记得导入pom依赖 fastjson

  public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {File targetFile = new File(filePath);if (!targetFile.exists()) {targetFile.mkdirs();}FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);out.write(file);out.flush();out.close();}//处理文件上传@ResponseBody //返回json数据@RequestMapping(value = "upload", method = RequestMethod.POST)public JSONObject uploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {String contentType = file.getContentType();//System.out.print(contentType);String fileName = System.currentTimeMillis()+file.getOriginalFilename();String filePath = "D:/ruoyi/mybatisplus/src/main/resources/static/img/";JSONObject jo = new JSONObject();//实例化json数据if (file.isEmpty()) {jo.put("success", 0);jo.put("fileName", "");}try {uploadFile(file.getBytes(), filePath, fileName);jo.put("success", 1);jo.put("fileName", fileName);// jo.put("xfileName", filePath+"/"+fileName);} catch (Exception e) {// TODO: handle exception}//返回jsonreturn jo;}@ResponseBody //返回json数据@RequestMapping("deleteImages")public String deleteImages(HttpServletRequest request) {String resultInfo = null;String filePath = request.getParameter("filePath");//这里是可以在控制器分割字符的一个方法//int lastIndexOf = filePath.lastIndexOf("/");//String sb = filePath.substring(lastIndexOf+1,filePath.length());//由于我们只获取了图片的名称并没有获取到所有的地址，，所以我们需要去给他进行添加存放图片的地址File file = new File("D:/ruoyi/mybatisplus/src/main/resources/static/img/"+filePath);if (file.exists()) {if (file.delete()) {resultInfo = "1-删除成功";}else {resultInfo = "0-删除失败";}}else {resultInfo = "文件不存在！";}return resultInfo;}

6.html修改页面

   <tr><!--      <td><img th:src="@{${a.file}}"  width="90" height="80"></td>--><th><input name="file" id="file1"  type="hidden" th:value="${apple.file}"><!--修改时候需要添加th:value，value获取之前已存在的图片属性--><input type="file"  id="file"><p id="url"><img th:src="@{${a.file}}"  width="90" height="80"></p><input type="button" id="button" value="上传" ><input type="button" id="t_button" value="取消上传" ></th></tr>

7.再在修改页面导入jq即可（与添加页面的jq相同），与添加图片共用controller中的方法

SpringBoot+Thymeleaf实现图片上传和显示相关推荐

HTML5输入框里加图片代码,做了一个input上传加号框，图片上传后显示在框中，怎么让加号消失？...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
SpringBoot整合springDataJpa实现图片上传和显示
目录使用工具使用说明使用maven的pom.xml文件环境搭建代码示例 SQL代码 java目录 Img.java MyWebMvcConfigurerAdapter.java FileCo ...
springboot入门系列教程|第九篇：springboot实现图片上传与显示（附源码）
前言## 上一篇我们介绍了springboot如何实现自定义拦截器配合注解使用,那么这篇我们将介绍springboot实现图片上传的功能. 目录## 文章目录前言## 目录## 项目创建### 项目 ...
SpringBoot项目实现图片上传，并可以在浏览器上显示
接触SpringBoot一段时间了,今天来实现一下图片上传功能. 首先在jsp页面代码如下: method="post" enctype="multipart/form- ...
IDEA中Spring MVC实现图片上传并显示
我们都知道web项目需要部署到tomcat服务器中运行那么,我们又是如何通过tomcat来访问存放在本地磁盘中的图片呢?,通过tomcat访问本地图片,需要配置虚拟路径,下面介绍两种配置虚拟路径的方 ...
阿里OSS对象存储，实现图片上传进度显示ProgressListener；
想了解阿里OSS对象存储,实现图片上传的内容的可看我的另一篇博客,博客中有完整代码,这篇博客是以上一篇阿里OSS对象存储博客为基础,只写一些与进度有关的内容,细心往下看js代码中有需要注意的地方! 实 ...
js 点击按钮或者图片，实现图片上传并显示在页面上
点击图片本身,实现图片上传: <div class="card">// 用于接受上传的图片<img src="img.jpg" alt=&qu ...
javascript实现图片上传实时显示上传图片
我们平时会用到图片上传要求上传的图片要实时显示,那么下面就是我的方法 HTML代码如下 <input type="file" name="file" on ...
php实现图片上传和显示,上传和显示图片 - php - 生活点滴
php保存图片保存上传图片有两种方法.一种是在mysql数据库中保存图片文件,另一种是在mysql中只保存文件名,而图片文件保存在php.ini配置文件中设置的upload临时目录,也就是uploa ...

SpringBoot+Thymeleaf实现图片上传和显示

SpringBoot+Thymeleaf实现图片上传和显示相关推荐

最新文章

热门文章