用springboot写一个使用弹窗上传形式的代码
时间: 2024-02-12 11:04:30 浏览: 24
好的,下面是用Spring Boot实现弹窗上传的代码示例:
1. 首先,需要在pom.xml中添加依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
```
2. 在Controller中添加上传文件的方法:
```java
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public String uploadFile(@RequestParam("file") MultipartFile file, Model model) {
String fileName = file.getOriginalFilename();
String filePath = "/Users/username/uploads/";
try {
// 保存文件
File dest = new File(filePath + fileName);
FileUtils.copyInputStreamToFile(file.getInputStream(), dest);
model.addAttribute("message", "文件上传成功!");
} catch (IOException e) {
model.addAttribute("message", "文件上传失败!");
}
return "uploadFileResult";
}
```
3. 在html页面中添加表单和弹窗上传的js代码:
```html
<form action="/uploadFile" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="file">选择文件:</label>
<input type="file" name="file" id="file" class="form-control">
</div>
<button type="submit" class="btn btn-primary">上传</button>
</form>
<script>
$(function () {
$('input[type=file]').change(function () {
$('#filename').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
});
</script>
```
4. 在Controller中添加返回上传结果的方法:
```java
@RequestMapping(value = "/uploadFileResult", method = RequestMethod.GET)
public String uploadFileResult(Model model) {
return "uploadFileResult";
}
```
5. 在上传结果的html页面中添加显示上传结果的代码:
```html
<div class="container">
<h3 th:text="${message}"></h3>
</div>
```
6. 运行程序,访问上传文件的页面,选择文件后点击上传按钮,即可弹出文件选择框并上传文件。