SpringBoot+Thymeleaf图片上传

首先需要添加本地图片映射我是在启动类添加


@SpringBootApplication
@MapperScan("com.example.fuxi.Mapper")
public class FuxiApplication implements WebMvcConfigurer {public static void main(String[] args) {SpringApplication.run(FuxiApplication.class, args);}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/*** 资源映射路径* addResourceHandler：访问映射路径* addResourceLocations：资源绝对路径*/registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:E:/IDEA项目/fuxi/src/main/resources/static/img/");}}

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

 <tr style="font-weight: bold"><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>班级</td><td>年级</td><td>图片</td><td>操作</td></tr><tr th:each="student:${student}" th:id="'id'+${student.sid}"><td th:text="${student.sid}"></td><td th:text="${student.sname}"></td><td th:text="${student.sage}"></td><td th:text="${student.ssex}"></td><td th:text="${student.classes.cname}"></td><td th:text="${student.grade.gname}"></td><td><img th:src="@{${student.file}}"  width="90" height="80"></td><td><a th:href="@{/student/findByid(sid=${student.sid})}">修改</a><a th:href="@{/student/delete(sid=${student.sid})}">删除</a><a th:onclick="'javascript:del('+${student.sid}+');'">删除</a><!--    <a th:href="@{/student/edit(sid=${student.sid})}">修改</a>--></td></tr>

添加页面
<input name="file" id="file1" type="hidden"> 这name是真正向后端数据库添加的
<input type="file" id="file">这是下面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: "/student/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("/student/deleteImages",{filePath:str_img},function(data){alert(data);//这里我们取消上传成功之后去给换成一个暂无图片的一个图$("#url img").attr("src","/imctemp-rainy/11.jpg");$("#file1").val("/imctemp-rainy/11.jpg");});});})

添加图片需要的控制器

  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 = "E:/IDEA项目/fuxi/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("E:/IDEA项目/fuxi/src/main/resources/static/img/"+filePath);if (file.exists()) {if (file.delete()) {resultInfo = "1-删除成功";}else {resultInfo = "0-删除失败";}}else {resultInfo = "文件不存在！";}return resultInfo;}

修改页面

   <tr><!--      <td><img th:src="@{${student.file}}"  width="90" height="80"></td>--><th><input name="file" id="file1"  type="hidden"><input type="file"  id="file"><p id="url"><img th:src="@{${student.file}}"  width="90" height="80"></p><input type="button" id="button" value="上传" ><input type="button" id="t_button" value="取消上传" ></th></tr>

修改页面所需的jq和controller与添加的一样

SpringBoot+Thymeleaf图片上传相关推荐

菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
springboot入门系列教程|第九篇：springboot实现图片上传与显示（附源码）
前言## 上一篇我们介绍了springboot如何实现自定义拦截器配合注解使用,那么这篇我们将介绍springboot实现图片上传的功能. 目录## 文章目录前言## 目录## 项目创建### 项目 ...
springboot实现图片上传到又拍云中，并且保存图片外连接路径到数据库，外连接也可访问图片（一）
注册又拍云账号,申请一个云存储空间.如果开启服务状态,开启状态把必须要进行实名认证.开启状态之后,自行申请服务即可.申请完成之后,点击配置进入下个页面不用管,直接点击存储管理. 拉到最下面查看管理员 ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
springboot 实现图片上传功能
springboot 实现图片上传功能这几天在做重构学校的图书馆项目,用sprinboot重新搭建项目,原项目是使用PHP搭建的,刚开始看着挺懵的,慢慢的就看懂.这个项目中遇到的难题是照片上传功能, ...
使用SpringBoot将图片上传至阿里云OSS
一. 对象存储OSS 1. 什么是OSS? 官方的解释是这样的:阿里云对象存储OSS(Object Storage Service)是一款海量.安全.低成本.高可靠的云存储服务,提供99.999999 ...
springboot+vue图片上传显示
1.启动类 @Override//图片上传的public void addResourceHandlers(ResourceHandlerRegistry registry) {registry.ad ...
springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...

SpringBoot+Thymeleaf图片上传

SpringBoot+Thymeleaf图片上传

SpringBoot+Thymeleaf图片上传相关推荐

最新文章

热门文章