thinkphp layui 弹窗后，批量上传图片，获取表单的数据，并请求给后端

弹出页面的代码

html代码

<form class="layui-form" style="padding-top: 2%" lay-filter="goods-images-add">
    <div class="layuimini-main">

        <input type="hidden" id="files" name="files" value="">

        <div class="layui-form-item" >
            <p style="margin-left: 10px;color: #9b2208">
                <b>
                系统根据文件名称 自动匹配商品,支持JPG,JPEG,PNG格式图片
                <br>
                PCU607.jpg 对应PCU607封面主图
                <br>
                PCU607_1.jpg 对应PCU607第一张副图片
                <br>
                PCU607_2.jpg 对应PCU607第二张副图片
                </b>
            </p>
        </div>

        <div class="layui-form-item" >
            <div class="layui-upload-drag" id="edm-upload" style="width: 89%;">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0">
                <textarea placeholder="" class="layui-textarea" id="content" rows="17"></textarea>
            </div>
        </div>




    </div>

</form>
<script>

    var images = [];
    layui.use(['form', 'jquery', 'upload',], function () {
        var form = layui.form
            , upload = layui.upload
            , $ = layui.jquery;
            
        //拖拽上传 基本上应该是OK的
        upload.render({
            elem: '#edm-upload'
            ,url: '/goods_images/upload' //改成您自己的上传接口
            ,field:'file'
            ,accept:'file'
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
              
                layer.load(); //上传loading
            }
            ,done: function(res){

                // layer.closeAll('loading'); //关闭loading
                // layer.msg('上传成功');
                //
                // layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                // layui.$('#uploadDemoView').append('<input type="hidden" name="files[]" value="'+res.data.src+'">');
                // // $('input[name=filepath]').attr("value",res.data.src);
                // var content = $('#content').val()
                // var msg = content+"上传成功："+res.data.src+"\n"
                // $('#content').val(msg)

                layer.closeAll('loading'); //关闭loading
                /**
                 * 限制文件数量
                 */
                if (res.code == 0){
                    layer.msg('上传成功');
                    images.push(res.data);
                    console.log(images)

                    var content = $('#content').val()
                    var msg = content+"上传文件【"+res.oldName+"】成功，文件信息：\n"+res.data+"\n\n"
                    $('#content').val(msg)

                    let datas = images.join(',');
                    $('#files').val(datas);

                }else{
                    layer.closeAll('loading'); //关闭loading
                    var content = $('#content').val()
                    var msg = content+"上传失败：系统异常\n"
                    $('#content').val(msg)
                }

            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
                var content = $('#content').val()
                var msg = content+"上传失败：系统异常\n"
                $('#content').val(msg)
            }
        });



        form.render();


    });
</script>

效果图

点击弹出 窗口，以及点击保存并关闭发送请求

核心代码

<div class="layui-inline">
      <button type="button" class="layui-btn goods-image-images">批量上传</button>
  </div>

 $('.goods-image-images').on('click', function (e) {
            var content = layuimini.getHrefContent("/goods_images/images");
            var openWH = layuimini.getOpenWidthHeight();
            var index = layer.open({
                title: '批量上传',
                type: 1,
                shade: 0.2,
                maxmin: true,
                // shadeClose: true,
                area: ['30%', '80%'],
                content: content
                , btn: [ '保存并关闭', '取消']
                , yes: function (index, layero) {
					 data = form.val("goods-images-add");

                    // 发送请求
                    $.post('/edm/store', data, function (res) {
                        if (res.code == 1) {
                            layer.msg(res.data);
                            layer.close(index);
                        } else {
                            layer.msg(res.data);
                            return false;
                        }
                    }, 'json');

                }
                , btn2: function (index, layero) {


                },
                btnAlign: 'l'

            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        })

效果图