layuimini+thinkphp 实现弹窗添加

js

      $('.edm-add').on('click', function (e) {
            var content = layuimini.getHrefContent("/edm/add");
            var openWH = layuimini.getOpenWidthHeight();
            var index = layer.open({
                title: '上传EDM资源',
                type: 1,
                shade: 0.2,
                maxmin: true,
                // shadeClose: true,
                area: ['30%', '80%'],
                content: content
                , btn: [ '保存并关闭', '取消']
                , yes: function (index, layero) {
                    var data = form.val("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);
            });
        })

/edm/add 页面

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

        <div class="layui-form-item">
            <label class="layui-form-label">选择文件夹</label>
            <div class="layui-input-block">
                <select name="edm_email_id">
                    {foreach $menus as $row}
                    <option value="{$row.id}">{$row.name|default=''|raw}</option>
                    {/foreach}
                </select>
            </div>
        </div>


        <div class="layui-form-item" >
            <div class="layui-upload-drag" id="edm-upload" style="width: 50%;margin-left: 20%;">
                <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" >
            <p style="margin-left: 25px;color: #ff3222">上传文件信息提示</p>
        </div>


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

    </div>

</form>
<script>
    layui.use(['form', 'jquery', 'upload',], function () {
        var form = layui.form
            , upload = layui.upload
            , $ = layui.jquery;


        //拖拽上传 基本上应该是OK的
        upload.render({
            elem: '#edm-upload'
            ,url: '/api/upload/line_artwork' //改成您自己的上传接口
            ,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)
                // 这个需要进行append 文本框以及 hidden 。

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

        form.render();


    });
</script>

效果图