文件上传（Springboot,Ajax,Html）
前端代码：
1.单文件上传
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="file"/>
</form>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://localhost:8080/springbootdemo/file/upload",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上传失败");
});
});
});
</script>
</html>
2.多文件上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input type="file" name="file" multiple="multiple"/><br>
</form>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://localhost:8080/springbootdemo/file/uploadFiles",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上传失败");
});
});
});
</script>
</html>
后台代码：
@RestController
@RequestMapping("/file")
public class FileController {
/**
* 单文件上传
*
* @param file
* @param request
* @return
*/
@PostMapping("/upload")
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
if (!file.isEmpty()) {
String saveFileName = file.getOriginalFilename();
File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
}
try {
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));
out.write(file.getBytes());
out.flush();
out.close();
return ResultUtils.buildResult(saveFile.getName() + " 上传成功");
} catch (FileNotFoundException e) {
e.printStackTrace();
return ResultUtils.buildResult("上传失败," + e.getMessage());
} catch (IOException e) {
e.printStackTrace();
return ResultUtils.buildResult("上传失败," + e.getMessage());
}
} else {
return ResultUtils.buildResult("上传失败，因为文件为空.");
}
}
/**
* 多文件上传
*
* @param request
* @return
*/
@PostMapping("/uploadFiles")
@ResponseBody
public String uploadFiles(HttpServletRequest request) throws IOException {
File savePath = new File(request.getSession().getServletContext().getRealPath("/upload/"));
if (!savePath.exists()) {
savePath.mkdirs();
}
List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
MultipartFile file = null;
BufferedOutputStream stream = null;
for (int i = 0; i < files.size(); ++i) {
file = files.get(i);
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
File saveFile = new File(savePath, file.getOriginalFilename());
stream = new BufferedOutputStream(new FileOutputStream(saveFile));
stream.write(bytes);
stream.close();
} catch (Exception e) {
if (stream != null) {
stream.close();
stream = null;
}
return "第 " + i + " 个文件上传有错误" + e.getMessage();
}
} else {
return "第 " + i + " 个文件为空";
}
}
return "所有文件上传成功";
}
}
大于1MB的文件上传时会提示出错的，所以要进行设置。添加一个配置文件就可以了。
@Configuration
public class FileUploadConfig {
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize("100MB");
factory.setMaxRequestSize("100MB");
return factory.createMultipartConfig();
}
}
也可以在application.properties中加入这两句：
spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=100Mb
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律