layui 多图片上传

效果如下:

入口                                                                                                                                                  

      <div class="layui-form-item">
            <div class="layui-upload" style="width: 90%">
                <button type="button" class="layui-btn" id="upload"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                <span style="color: red"> (可上传多张照片)</span>
                <input type="button" id="btnHide9" style="display: none" class="none">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 130px;width: 620px">
                    <ul id="demo9" class="layui-upload-list">
                    </ul>
                </blockquote>
                <input type="hidden" name="imgUrl" id="imgUrl">
            </div>
        </div>

 其中 imgUrl 为上传字段（保存url的）

css 样式

        #demo9 {
            margin: 0 auto;
            font-size: 0;
        }

        #demo9 li {
            display: inline-block;
            width: 150px;
            padding-top: 1%;
        }

        #demo9 li img {
            width: 100%;
        }

        .removeBtn {
            position: absolute;
            top: 2px;
            right: 35px;
            z-index: 11;
            border: 0px;
            border-radius: 50px;
            background: red;
            width: 22px;
            height: 22px;
            color: white;
            font-size: 25px;
            line-height: 25px;
        }

  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/showPhoto1/css/viewer.css">
    <script src="${pageContext.request.contextPath}/js/showPhoto1/js/viewer.js"></script>

   upload = layer.upload; //自己引入upload