项目 图片文件上传
注意重复文件名的处理
页面使用基于bootstrap的图片上传插件 fileinput
步骤一:
引入相关的依赖的插件
<script src="/assets/js/bootstrap.min.js"></script>
<link href="/js/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/js/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
步骤二:
方法一:在文件域中设置 class = "file"
<input id="rimageFile" name="rimageFile" class="file" type="file">
注意HTML的input属性 multiple,决定fileinput是否接收多图片上传
方法二:使用js把文件域转化成fileinput对象
<input id="rimageFile" name="rimageFile" type="file" >
<script >
$(function(){
$("#rimageFile").fileinput({
});
})
</script>
后端处理前端发送的图片文件的处理
@RequestMapping("/doadd")
public String doAdd(Route route, @RequestParam("rimageFile") MultipartFile rimageFile, HttpServletRequest request) throws IOException {
//项目部署目录 + img/prduct/rimage/
String savePath = request.getServletContext().getRealPath("img/product/rimage/");
//处理文件名重复
String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." + FilenameUtils.getExtension(rimageFile.getOriginalFilename());
//上传目录不存在,先创建
File savePathDir = new File(savePath);
if (!savePathDir.exists()) {
savePathDir.mkdirs();
}
//保存文件
rimageFile.transferTo(new File(savePathDir, fileName));
//设置route的rimage属性等于图片的相对令
route.setRimage("img/product/rimage/" + fileName);
routeService.add(route);
return "redirect:/admin/route/page";
}
String savePath = request.getServletContext().getRealPath("img/product/rimage/");
获取项目的部署路径,即获取项目存储文件的位置,括号里的路径,表示的是增加 存储的项目路径(不写的话就是直接使用项目的部署路径,这里加上目录可以分层次显示)
String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." + FilenameUtils.getExtension(rimageFile.getOriginalFilename());
获取到文件名,上传的文件名可能重复,于是通过UUID重新编写文件名,加上文件的扩展名
File savePathDir = new File(savePath);
根据保存路径,创建文件存储路径(目前是空文件)
if (!savePathDir.exists()) { savePathDir.mkdirs(); }
文件路径不存在,则创建,此时再本地电脑上创建好了文件存储目录,是空文件
rimageFile.transferTo(new File(savePathDir, fileName));
使用transferTo方法上传文件,在savePath目录下可以看到上传的文件
图片数据在前端中回显
<!--回显缩略图-->
<script th:inline="javascript">
$(function () {
var rimage = '/' + [[${route.rimage}]];
$("#rimageFile").fileinput({
initialPreview: ["<img src='" + rimage + "' class='file-preview-image' >"],
overwriteInitial: true
});
})
</script>
处理线路的详细图
先删除原图,再上传新图,为方法添加事务机制
controller 层:
多文件的上传保存:
就是多了一个遍历而已,大图上传到大图文件夹,小图上传到小图文件夹
@RequestMapping("/doimage")
public String doImage(Integer rid,
@RequestParam("bigPicFile") MultipartFile[] bigPicFile,
@RequestParam("smallPicFile") MultipartFile[] smallPicFile,
HttpServletRequest request) throws Exception {
List<String> bigPic = new ArrayList<>();
List<String> smallPic = new ArrayList<>();
String path = request.getServletContext().getRealPath("/");
for (MultipartFile f : bigPicFile) {
File bigPath = new File(path + "img\\product\\big-pic\\");
if (!bigPath.exists()) {
bigPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." + FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(bigPath, fileName));
bigPic.add("img/product/big-pic/" + fileName);
}
for (MultipartFile f : smallPicFile) {
File smallPath = new File(path + "img\\product\\small-pic\\");
if (!smallPath.exists()) {
smallPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." + FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(smallPath, fileName));
smallPic.add("img/product/small-pic/" + fileName);
}
//要添加的图片列表
List<RouteImg> ris = new ArrayList<>();
for (int i = 0; i < bigPic.size(); i++) {
RouteImg img = new RouteImg();
img.setRid(rid);
img.setBigpic(bigPic.get(i));
img.setSmallpic(smallPic.get(i));
ris.add(img);
}
imgService.saveImg(rid, ris);
return "redirect:/admin/route/page";
}