给出SSM+Layui实现图片上传,给出前后端代码,Java和html
时间: 2024-03-24 14:36:53 浏览: 135
基于Java的SSM+LayUi学生学籍管理系统设计源码
好的,以下是SSM+Layui实现图片上传的前后端代码。
1. HTML页面代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<form class="layui-form" action="/upload" method="post" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">选择图片</label>
<div class="layui-input-block">
<input type="file" name="file" lay-verify="required" class="layui-upload-file">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">上传</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</body>
</html>
```
2. Java Controller代码
```java
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
@Controller
public class UploadController {
@RequestMapping("/")
public String index() {
return "upload";
}
@PostMapping("/upload")
@ResponseBody
public String upload(MultipartFile file, HttpServletRequest request) {
if (file.isEmpty()) {
return "请选择文件";
}
String fileName = file.getOriginalFilename();
String suffixName = StringUtils.getFilenameExtension(fileName);
String filePath;
try {
filePath = ResourceUtils.getURL("classpath:").getPath() + "static/upload/";
} catch (FileNotFoundException e) {
e.printStackTrace();
return "上传失败";
}
File dest = new File(filePath + fileName);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
return "上传成功";
} catch (IOException e) {
e.printStackTrace();
return "上传失败";
}
}
}
```
3. Java配置文件代码
```java
package com.example.demo.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
```
4. 后端pom.xml配置
在 pom.xml 文件中添加以下依赖:
```xml
<!--layui依赖-->
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-ui</artifactId>
<version>${ruoyi.version}</version>
</dependency>
```
5. 前端layui模块的引入
在 HTML 页面中引入以下模块:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
以上就是用SSM+Layui实现图片上传的前后端代码,希望对你有所帮助。
阅读全文