bootstrap-fileinput 多图片上传组件的使用

最新推荐文章于 2022-02-17 15:39:45 发布

zhengTornado

最新推荐文章于 2022-02-17 15:39:45 发布

阅读量1.1k

点赞数

分类专栏： java-web

本文链接：https://blog.csdn.net/zhengTornado/article/details/103541752

版权

java-web 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在添加页面创建多图片上传组件

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增博客')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-tbBlogs-add">
      
        <div class="form-group">
            <label class="col-sm-3 control-label">博客封面：</label>
            <div class="col-sm-8">
                <input id="blogsCoverImgFile" name="blogsCoverImgFile" type="file" multiple>
                <!--相对路径(是要保存的) 2019/12/11/9cb34e1ca970c5d86d66b670d6c99e82.jpg-->
                <input type="hidden" name="blogsCoverImg" id="relativePath" value="">
                <!--绝对路径 http://192.168.0.45:8080/profile/upload/2019/12/11/da76a6f6b1851ec15cefee989afe9c3f.jpg-->
                <input type="hidden" name="blogsCoverImgUrl" id="absolutePath" value="">
            </div>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "platform/tbBlogs"
    $("#form-tbBlogs-add").validate({
        onkeyup: false,
        rules: {
            xxxx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/add", $('#form-tbBlogs-add').serialize());
        }
    }

    //多图片上传组件
    $("#blogsCoverImgFile").fileinput({
        'theme': 'explorer-fas',
        //上传地址
        'uploadUrl': "/common/multiUpload",
        //默认异步上传true(上传2张请求后台url 2次，每次接收到1张)；
        // 同步上传false(同时上传2张图片时，后台用数组接收,请求后台URL 1次，接收到2张图)
        uploadAsync: true,
        //不覆盖已存在的图片
        overwriteInitial: false,
        enctype: 'multipart/form-data',
        //接收的文件后缀
        allowedFileExtensions: ["jpg", "jpeg", "png", "gif"],
        showUpload: true, //是否显示上传按钮
        showRemove: false, // 是否显示移除按钮
        maxFileCount: 4,//上传图片最大数量
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        showCaption: true,//是否显示说明
        showPreview: true,// 是否预展示图片
        maxFileSize: 51200,//单位为kb，如果为0表示不限制文件大小  50*1024=50MB
    })

    //定义3个全局变量
    //存放图片的相对路径
    var relativePaths = []
    //存放图片的绝对路径
    var absolutePaths = [];
    //存放一个对象 图片ID，绝对路径和相对路径
    var arrayObject = [];
    //上传按钮回调事件previewId上传图片自动生成的图片ID:preview-1576030307524_27-1
    $('#blogsCoverImgFile').on('fileuploaded', function (e, params, previewId) {
        console.log('打印日志', e, params, previewId);
        //采用异步上传，一张图片一张图片的上传
        var resultData = params.response.data[0];
        if (params.response.code === 0) {
            relativePaths.push(resultData.fileName)
            absolutePaths.push(resultData.url)
            arrayObject.push({"keyId": previewId, "relativePath": resultData.fileName, "absolutePath": resultData.url})
            //img.join(",") 表示将字符数组转成字符串 var a=[0,1,2,3,4,5,11],b=a.join(",") 打印b: "0,1,2,3,4,5,11"
            $("#relativePath").val(relativePaths.join(","))
            $("#absolutePath").val(absolutePaths.join(","))
        }
    });

    //场景1：新增图片，并上传之后的删除
    $('#blogsCoverImgFile').on('filesuccessremove', function (event, key, previewId) {
        debugger
        console.log("删除" + event, key, previewId)
        console.log("循环遍历数组对象" + arrayObject)
        for (var a = 0; a < arrayObject.length; a++) {
            if (arrayObject[a].keyId === key) {
                var relativePath = arrayObject[a].relativePath;
                var absolutePath = arrayObject[a].absolutePath;
                console.log("相对路径和绝对路径" + relativePath + absolutePath)
                $.post("/common/deleteImageUrl", {
                    imageURL: relativePath
                }, function (result) {
                    //循环遍历json数组
                    if (result.code === 0) {
                        for (var i = 0; i < relativePaths.length; i++) {
                            if (relativePath == relativePaths[i]) {
                                //删除数组中指定的某个元素splice(数组下标，删除长度)
                                relativePaths.splice(i, 1)
                            }
                        }
                        for (var i = 0; i < absolutePaths.length; i++) {
                            if (absolutePath == absolutePaths[i]) {
                                absolutePaths.splice(i, 1)
                            }
                        }
                        //删除指定的图片后，重新给隐藏域的图片路径赋值
                        $("#relativePath").val(relativePaths.join(","))
                        $("#absolutePath").val(absolutePaths.join(","))
                    } else {
                        $.modal.alertWarning(result.msg)
                    }
                })
            }
        }
    });
</script>
</body>
</html>

java后台接收图片服务

    /**
     * 可用于同步上传图片的请求， 一次请求接收2张图
     * 也可用于异步上传图片的请求：每次请求只接收1张图，
     * 通用上传请求
     */
    @PostMapping("/common/multiUpload")
    @ResponseBody
    public AjaxResult uploadMultipartFile(@RequestParam MultipartFile[] blogsCoverImgFile) throws Exception {
        List<Map<String, Object>> listMap = new ArrayList<>();
        try {
            for (MultipartFile file : blogsCoverImgFile) {
                // 上传文件路径
                String filePath = Global.getUploadPath();
                // 上传并返回新文件名称
                String fileName = FileUploadUtils.upload(filePath, file);
                String url = serverConfig.getUrl() + UPLOAD_PATH + fileName;
                Map<String, Object> map = new HashMap<>();
                map.put("fileName", fileName);
                map.put("url", url);
                listMap.add(map);
            }
            return AjaxResult.success(listMap);
        } catch (Exception e) {
            return AjaxResult.warn(e.getMessage());
        }
    }

删除上传成功后的图片

    /**
     * 删除已经成功上传的图片
     * @param imageURL 相对路径 2019/12/11/f94a8be450e583689a76b184187ab397.jpg,
     *                 2019/12/11/f3911b8fad7b4e241ad753b0c50f7cc6.jpg
     * @return
     */
    @PostMapping("/common/deleteImageUrl")
    @ResponseBody
    public AjaxResult deleteImgeByUrl(String imageURL) {
        boolean result=false;
        try {
            String[] imageUrlArray = imageURL.split(",");
            for(String imageUrl:imageUrlArray){
                // 上传文件路径
                String filePath = Global.getUploadPath();
                //上传图片的绝对路径
                String absoluteURL= filePath + imageUrl;
                File file=new File(absoluteURL);
                if(file.exists() && file.isFile()) {
                     result = file.delete();
                }
            }
            if(result){
                return AjaxResult.success("删除成功");
            }else {
                return AjaxResult.error("删除失败！");
            }

        } catch (Exception e) {
            return AjaxResult.warn(e.getMessage());
        }
    }

zhengTornado

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-fileinput 多图片上传组件的使用

在添加页面创建多图片上传组件<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"><head> <th:block th:include="include :: header('新增博客')"/> <th:block th:include="i...
复制链接

扫一扫