layui上传照片

多图片上传

<div class="layui-form-item">
    <label class="layui-form-label layui-required">市场图片:</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">选择图片</button>
            <button type="button" class="layui-btn" id="clearbannerDataImg" style="margin-left: 10px">
                清除所选图片
            </button>
        </div>
        <input type="hidden" name="listImg" id="listImg" th:field="*{marketImage}" placeholder="请输入封面图片"
               class="layui-input"/>
    </div>
</div>
<div class="layui-form-item" id="bannerDataDiv" style="display: none">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
</div>

单图片上传

<div class="layui-form-item">
   <label class="layui-form-label layui-required">推流封面:</label>
   <div class="layui-input-block">
       <div class="layui-upload">
           <button type="button" class="layui-btn" id="imgButton2">上传图片</button>
           <div class="layui-upload-list">
               <img class="layui-upload-img" onclick="showBigImage(this)" id="imgFor2"
                    style="width: 200px">
           </div>
       </div>
       <input type="hidden" id="pushImg" name="pushImg" th:field="*{pushImg}" placeholder="请输入市场名称"
              class="layui-input"/>
   </div>
</div>

<script th:inline="javascript">
    var bannerDataString = "";
    layui.use(['form', 'jquery', 'laydate', 'dictionary', 'upload'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let upload = layui.upload;
        let laydate = layui.laydate;

        let prefix = "/xdd_market/marketBazaar/";

        //多图片上传
        upload.render({
            elem: '#test2'
            , url: '/file/upload' //改成您自己的上传接口
            , multiple: true,
            number: 3
            , done: function (res) {
                //上传完毕
                $('#demo2').append('<img style="width: 92px;height: 92px" src="' + res.data.src + '" class="layui-upload-img">')
                bannerDataString += "," + res.data.src;
                showBannerDataDiv();
            }, error: function () {
                //演示失败状态，并实现重传
                alert("上传失败,请稍后再试")
            }
        });

        $(function () {
            var xddMarketBazaar = [[${xddMarketBazaar}]];
            var listImg = xddMarketBazaar.imgList;

            if (listImg && listImg.length > 0) {
                for (var i = 0; i < listImg.length; i++) {
                    $('#demo2').append('<img style="width: 92px;height: 92px" src="' + listImg[i] + '" class="layui-upload-img">')
                    bannerDataString += "," + listImg[i]
                }
            }
            showBannerDataDiv();
        })
        /**
         * 删除背景图
         */
        $("#clearbannerDataImg").click(function () {
            $('#demo2').html("");
            bannerDataString = "";
            showBannerDataDiv();
        })

        /**
         * 隐藏DIV
         */
        function showBannerDataDiv() {
            if (bannerDataString) {
                $("#bannerDataDiv").show();
            }
        }

        upload.render({
            elem: '#imgButton2'
            , url: '/file/upload' //改成您自己的上传接口
            , done: function (res, index, upload) {
                //如果上传失败
                //上传成功的一些操作
                $("#imgFor2").attr('src', res.data.src)
                $("#pushImg").val(res.data.src)
                layer.msg('上传成功', {icon: 1})
            }, error: function () {
                //演示失败状态，并实现重传
                alert("上传失败,请稍后再试")
            }
        });

        var xddMarketBazaar = [[${xddMarketBazaar}]];
        $("#imgFor").attr('src', xddMarketBazaar.marketImage)
        $("#imgFor2").attr('src', xddMarketBazaar.pushImg)

        form.on('submit(marketBazaar-update)', function (data) {
            for (var key in data.field) {
                var type = $(data.form).find("input[name='" + key + "']").attr("type");
                if (type == "checkbox") {
                    var value = "";
                    $(data.form).find("input[name='" + key + "']:checked").each(function () {
                        value += $(this).val() + ",";
                    })
                    if (value != "") {
                        value = value.substr(0, value.length - 1);
                        data.field[key] = value;
                    }

                }
            }
            //图册
            data.field.marketImage = bannerDataString.substr(1, bannerDataString.length);
            $.ajax({
                url: prefix + 'update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("marketBazaar-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    });
</script>