layui的upload使用

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

一  集成使用

1. 页面导入layui.js

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

 

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

二 .  页面使用

HTML

<!-- 图片展示-->
                <div class="row mb mt">
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label for="zmzlImgs" class="col-sm-3 control-label">资料图片</label>
                            <div class="col-sm-9">
                                <input type="hidden" class="layui-input" th:value="${houseInfo.zmzlImgs}"
                                       name="zmzlImgs" id="zmzlImgs">
                                <div class="layui-upload">
                                    <button type="button" class="btn btn-jwsb btn-success-upload" id="zmzl_Images">
                                        上传证明资料相关的图片
                                    </button>
                                    <div class="layui-upload-list" id="images_path_add_Images">
                                        <div th:each="srcImage:${houseInfo?.zmzlImgsList}"
                                             style="position: relative; display: inline-block;margin: 15px;">
                                            <img
                                                    th:src="${srcImage}"
                                                    class="layui-upload-img"
                                                    style="width:120px;height:120px"
                                                    th:onclick="showDetail([[${srcImage}]],'zmzlImgs')"
                                            >
                                            <i class="fa fa-window-close fa-2x"
                                               style="position: absolute;top:-10px;right:-10px;width: 25px;height: 25px "
                                               th:onclick="delSelectImages([[${srcImage}]],'zmzlImgs')"
                                            ></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="col-sm-12">
                            <img id="img_model_pic" width="304" height="236" class="img-responsive img-thumbnail"
                                 alt="样例图" src="/outer/modelpics/test.png">
                        </div>
                    </div>
                </div>

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

js部分<br>  //显示图片详细 　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', //上传接口   通过这种方式传递参数，对于页面上的动态参数，是取不到值的。这点在实际过程中就有遇到。