文件(图片)上传保存与展示

最新推荐文章于 2024-04-30 17:00:12 发布

塔◎

最新推荐文章于 2024-04-30 17:00:12 发布

阅读量890

点赞数

分类专栏： Java知识点总结文章标签： intellij-idea thymeleaf 增强mybatis 多文件上传回显

本文链接：https://blog.csdn.net/love_yr/article/details/121570509

版权

Java知识点总结专栏收录该内容

52 篇文章 3 订阅

订阅专栏

1.前端发起请求插入图片(单图),页面要求:

引入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">

或者使用

<input id="rimageFile" name="rimageFile" type="file" > 
<script >
$(function(){
$("#rimageFile").fileinput({ 
});
})
</script>

请求方式post,entype都必须写

控制器层接收:

更改文件名,存为对象属性值,保存图片地址到数据库

 private void withFile(Route route, MultipartFile rimageFile, HttpServletRequest request) throws IOException {
        String realPath = request.getServletContext().getRealPath("/img/product/rimage/");
        String originalFilename = rimageFile.getOriginalFilename();
        String fileName= UUID.randomUUID().toString().replace("-","")+ originalFilename.substring(originalFilename.lastIndexOf("."));
        File imgs= new File(realPath);
        if(!imgs.exists()){
            imgs.mkdirs();
        }
        rimageFile.transferTo(new File(imgs,fileName));
        route.setRimage("/img/product/rimage/"+fileName);
    }

2.数据库图片回显到页面(单图)

正常获取对象把图片地址传到后台

 @RequestMapping("/route/toupdate/{rid}")
    public String toupdate(@PathVariable("rid") Integer rid, Model model){
        List<Seller> list1 = sellerService.getSellerList();
        model.addAttribute("ss",list1);
        List<Category> getcategorys = categoryService.getcategorys();
        model.addAttribute("cs",getcategorys);
        Route route = routeService.findByid(rid);
        model.addAttribute("r",route);
        return "route/update";
    }

更新页面接收,页面要求:

引入fileinput插件

使用以下代码

<input id="rimageFile" name="rimageFile" type="file" th:value="${r.rimage}"
                               data-min-file-count="1">
                        <script th:inline="javascript">
                            $(function(){
                                var rimage = '/' + [[${r.rimage}]];
                                $("#rimageFile").fileinput({
                                    initialPreview: [
                                        "<img src='" + rimage +"' class='file-preview-image' >"
                                    ],
                                    overwriteInitial: true
                                });
                            })
                        </script>

单图更新同插入;

---------------------------------------------------------------------------------------------------------------------------

多图操作:多图从数据库回显到页面,控制器层得到关联的id和图片的list集合,页面使用js回显

 @RequestMapping("/route/image/{rid}")
    public String getImages(@PathVariable("rid") Integer rid,Model model){
        List<RoutePictureVO> byRid = routeService.findByRid(rid);
        model.addAttribute("pp",byRid);
        return "/route/image";
    }

页面引入fileinput插件,其他基本不用修改(主要在js里面操作),文本域使用mutiple表示允许多文件上传(这里)

页面示例:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>商品详细图片</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="/assets/js/html5shiv.min.js"></script>
    <script src="/assets/js/respond.min.js"></script>
    <![endif]-->

    <!--[if !IE]> -->
    <script src="/assets/js/jquery-2.1.4.min.js"></script>

    <!-- <![endif]-->

    <!--[if IE]>
    <script src="/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script src="/assets/js/bootstrap.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="/assets/js/jquery.dataTables.min.js"></script>
    <script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
    <script src="/assets/js/dataTables.buttons.min.js"></script>
    <script src="/assets/js/buttons.flash.min.js"></script>
    <script src="/assets/js/buttons.html5.min.js"></script>
    <script src="/assets/js/buttons.print.min.js"></script>
    <script src="/assets/js/buttons.colVis.min.js"></script>
    <script src="/assets/js/dataTables.select.min.js"></script>

    <!-- ace scripts -->
    <script src="/assets/js/ace-elements.min.js"></script>
    <script src="/assets/js/ace.min.js"></script>

    <script language="javascript" type="text/javascript" src="/js/My97DatePicker/WdatePicker.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>

</head>

<body class="no-skin">

<div th:replace="header :: navbar"></div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <div th:replace="left :: sidebar"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>

                    <li>
                        <a href="#">用户</a>
                    </li>
                    <li class="active">用户管理</li>
                </ul><!-- /.breadcrumb -->

            </div>

            <div class="page-content">

                <form action="/route/doimage" enctype="multipart/form-data" method="post">
					<!-- TODO 处理隐藏域，记录线路ID -->
                <input type="text" name="rid" th:value="${pp[0].rid}">
                    <div class="form-group">
                        <label for="bigPicFile">详细大图：</label>
                        <input id="bigPicFile" name="bigPicFile" type="file" multiple >
                    </div>
                    <div class="form-group">
                        <label for="smallPicFile">详细小图：</label>
                        <input id="smallPicFile" name="smallPicFile" type="file" multiple  >
                    </div>

                    <div class="form-group" style="text-align: center">
                        <input class="btn btn-primary" type="submit" value="提交" />
                        <input class="btn btn-default" type="reset" value="重置" />
                        <input class="btn btn-default" type="button" value="返回" />
                    </div>
                </form>

            </div><!-- /.page-content -->
			<!-- TODO 处理详细图片回显 -->
            <script th:inline="javascript">
                var ri = [[${pp}]]; //后台查询的图片列表
                console.log(ri)
                var bi = []; //回显的大图数组
                var si = []; //回显的小图数组
                for (var i = 0; i < ri.length; i++) {
                    bi.push("<img src='/" + ri[i].bigpic +"' class='file-preview-image' >");
                    si.push("<img src='/" + ri[i].smallpic +"' class='file-preview-image' >");
                }

                $("#bigPicFile").fileinput({
                    initialPreview: bi,
                    overwriteInitial: true,
                    minFileCount: 1,
                    maxFileCount: 4
                });
                $("#smallPicFile").fileinput({
                    initialPreview: si,
                    overwriteInitial: true,
                    minFileCount: 1,
                    maxFileCount: 4
                });
            </script>
        </div>
    </div><!-- /.main-content -->

</div><!-- /.main-container -->

</body>
</html>

插入多图片回显到数据库,思路,在回显的页面可以直接进行修改,点击提交就可以将页面的表单提交

将页面表单提交的数组数据遍历,整合成一个实体对象集合,在service层先删除原来的数据,再遍历集合逐个添加

@RequestMapping("/route/doimage")
public String doimage(Integer rid,MultipartFile[] bigPicFile,MultipartFile[] smallPicFile,HttpServletRequest request) throws IOException {
    //把数组里的每一个文件重命名并添加到新的集合中
    List<String> bigPic = new ArrayList<>();
    List<String> smallPic = new ArrayList<>();
    for (int i = 0; i < bigPicFile.length; i++) {
        String originalFilename = bigPicFile[i].getOriginalFilename();
        String realPath = request.getServletContext().getRealPath("/img/product/rimage");
        String fileName = UUID.randomUUID().toString().replace("-", "")+originalFilename.substring(originalFilename.lastIndexOf('.'));
        //如果文件夹不存在创建文件夹
        File imgs = new File(realPath);
        if (!imgs.exists()){
            imgs.mkdirs();
        }
        //添加文件
        bigPicFile[i].transferTo(new File(imgs,fileName));
        bigPic.add("img/product/rimage/"+fileName);
    }
    for (MultipartFile multipartFile : smallPicFile) {
        String originalFilename = multipartFile.getOriginalFilename();
        String realPath = request.getServletContext().getRealPath("/img/product/rimage");
        String fileName = UUID.randomUUID().toString().replace("-", "")+originalFilename.substring(originalFilename.lastIndexOf('.'));
        //如果文件夹不存在创建文件夹
        File imgs = new File(realPath);
        if (!imgs.exists()){
            imgs.mkdirs();
        }
        //添加文件
        multipartFile.transferTo(new File(imgs,fileName));
        smallPic.add("img/product/rimage/"+fileName);
    }
    //到此得到了两个新的存有图片路径的集合,遍历集合把值赋给每一个实体或表格,要先判断那个集合长度更大,使用大的那个次数
    int length=bigPic.size()>=smallPic.size()?bigPic.size():smallPic.size();
    if (bigPic.size()>=smallPic.size()){
        int num = bigPic.size()-smallPic.size();
        for (int i = 0; i < num; i++) {
            smallPic.add(null);
        }
    }else{
        int num = smallPic.size()-bigPic.size();
        for (int i = 0; i < num; i++) {
            bigPic.add(null);
        }
    }
    List<RouteImg> list = new ArrayList<>();
    for (int i = 0; i <length; i++) {
        RouteImg routeImg = new RouteImg();
        routeImg.setRid(rid);
        routeImg.setBigPic(bigPic.get(i));
        routeImg.setSmallPic(smallPic.get(i));
        list.add(routeImg);
    }
    routeImgService.updateImages(rid,list);
    return "redirect:/route/list";
}

@Service
public class RouteImgServiceImpl implements RouteImgService {
    @Resource
    private RouteImgMapper routeImgMapper;
    @Override
    @Transactional
    public void updateImages(Integer rid, List<RouteImg> list) {
        routeImgMapper.delete(Wrappers.<RouteImg>query().eq("rid",rid));
        for (RouteImg routeImg : list) {
            routeImgMapper.insert(routeImg);
        }
    }
}