526互联

layui的upload使用

发布时间 2023-04-07 17:48:19作者: freewsf

文件上传是表单中常用的，layui的upload上传组件是非常好用的上传组件。

一  集成使用

1. 页面导入layui.js

<script th:src="@{/ajax/libs/layui/layui.js}"></script>

 

 注意：需要把layui相关的资源放在一起，layui.js里面会自动加载同级目录下相关的CSS

二 .  页面使用

HTML

 1 <!-- 图片展示-->
 2                 <div class="row mb mt">
 3                     <div class="col-sm-8">
 4                         <div class="form-group">
 5                             <label for="zmzlImgs" class="col-sm-3 control-label">资料图片</label>
 6                             <div class="col-sm-9">
 7                                 <input type="hidden" class="layui-input" th:value="${houseInfo.zmzlImgs}"
 8                                        name="zmzlImgs" id="zmzlImgs">
 9                                 <div class="layui-upload">
10                                     <button type="button" class="btn btn-jwsb btn-success-upload" id="zmzl_Images">
11                                         上传证明资料相关的图片
12                                     </button>
13                                     <div class="layui-upload-list" id="images_path_add_Images">
14                                         <div th:each="srcImage:${houseInfo?.zmzlImgsList}"
15                                              style="position: relative; display: inline-block;margin: 15px;">
16                                             <img
17                                                     th:src="${srcImage}"
18                                                     class="layui-upload-img"
19                                                     style="width:120px;height:120px"
20                                                     th:onclick="showDetail([[${srcImage}]],'zmzlImgs')"
21                                             >
22                                             <i class="fa fa-window-close fa-2x"
23                                                style="position: absolute;top:-10px;right:-10px;width: 25px;height: 25px "
24                                                th:onclick="delSelectImages([[${srcImage}]],'zmzlImgs')"
25                                             ></i>
26                                         </div>
27                                     </div>
28                                 </div>
29                             </div>
30                         </div>
31                     </div>
32                     <div class="col-sm-4">
33                         <div class="col-sm-12">
34                             <img id="img_model_pic" width="304" height="236" class="img-responsive img-thumbnail"
35                                  alt="样例图" src="/outer/modelpics/test.png">
36                         </div>
37                     </div>
38                 </div>

 

//js部分

  #显示图片详细

　let showDetail = function (url) {

    console.log(url);
    layer.open({
        type: 2,
        shade: 0.1,
        area: ['60%', '60%'],
        title: '图片详情',
        content: url
    });
};

#删除图片
let delSelectImages = function (url, targetId) {
    console.log(url);
    layer.confirm("你确定要删除此图片么？",
        {
            btn: ['是的,我确定', '我再想想'], yes: function (index) {
                var $selectObj = $("#base_info #images_path_add_Images img[src='" + url + "']");
                $selectObj.parent().remove();
                var imgsString = $("#base_info input.layui-input").val();
                $("#base_info input.layui-input").val(imgsString.replace(url + ",", ""));
                layer.close(index)
            }, cancel: function (index) {
                layer.close(index)
            }
        },
    )
};


#加载layui upload 组件
layui.use('upload', function () {
　　upload = layui.upload;
    console.log($("#base_info #test_Images"));
    console.log($("#base_info #test_Images").html());
    //执行实例
    uploadInst = upload.render({
        elem: '#zmzl_Images', //绑定元素
        url: '/file/upload', //上传接口
        multiple: true,
        before: function (inputObj) {
            index = layer.load();
            this.data = {
                idnumber: $("#form_baseinfo input[name='studentIdNumber']").val()
            };
        }
        , done: function (res) {
            //上传完毕回调
            if (res.code != 0) {
                layer.closeAll();
                return layer.msg('上传失败');
            }
            $('#base_info #images_path_add_Images').prepend('<div style="position: relative; display: inline-block;margin: 15px;"><img src="' + res.data.url + '" class="layui-upload-img" onclick="showDetail(' + "'" + res.data.url + "'" + ')"  style="width:120px;height:120px" ><i class="fa fa-window-close fa-2x" style="position: absolute;top:-10px;right:-10px;width: 25px;height: 25px " onclick="delSelectImages(' + "'" + res.data.url + "'" + ')"  ></i></div>');
            var str = $("#base_info .layui-input").val();
            $("#base_info .layui-input").val(str + res.data.url + ",");
            layer.closeAll();
        }
        , error: function () {
            //请求异常回调
            layer.closeAll();
        }
    });
});
其中需要注意的是点：
1. 点击哪个元素会触发上传
elem: '#zmzl_Images', //绑定元素

2. 上传的时候，传递参数到后台进行额外处理。
before: function (inputObj) {
            index = layer.load();
            this.data = {
                idnumber: $("#form_baseinfo input[name='studentIdNumber']").val()
            };
        }
具体是通过：this.data中的json对象来实现的

三 . 可能遇到的问题

1.layui upload组件不要多次实例化，否则会导致组件失效。
2.不要尝试在 url: '/file/upload?xxx=yyy', //上传接口   通过这种方式传递参数，对于页面上的动态参数，是取不到值的。这点在实际过程中就有遇到。