Layui文件上传附带表单相关参数

HTML

    <div id="addmb" style="display:none;padding:10px;">
        <form class="layui-form layui-form-pane" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">模板介绍</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="mbjs" autocomplete="off" placeholder="请输入介绍" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">模板类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="roles" value="悬浮窗" title="悬浮窗">
                    <input type="radio" name="roles" value="微信号样式" title="微信号样式" checked="">
                    <input type="radio" name="roles" value="底部" title="底部">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">回传方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="hcfs" value="长按回传" title="长按回传" checked="">
                    <input type="radio" name="hcfs" value="复制回传" title="复制回传">
                    <input type="radio" name="hcfs" value="单击回传" title="单击回传">
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                        <img style="width:100px;" id="demo1" src="" alt="" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">代码块</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入模板代码" name="code" class="layui-textarea mbdm" style="margin-top: 0px; margin-bottom: 0px; height: 273px;"></textarea>
                </div>
            </div>

        </form>
        <div class="layui-form-item">
            <button class="layui-btn" id="doadd">提交</button>
        </div>
    </div>

JS

    <script type="text/javascript">
        layui.use(['upload', 'element', 'layer'], function() {
            var $ = layui.jquery,
                upload = layui.upload,
                element = layui.element,
                layer = layui.layer;
            form = layui.form;
            layui.$('#doadd').on('click', function() {

                datafo = form.val('example'); //表单val
                // alert(JSON.stringify(data));

            });
            //选完文件后不自动上传
            upload.render({
                elem: '#test8',
                url: '/api/v1.Ymlogin/addmb',
                auto: false, //不自动上传
                // multiple: true,//多文件上传
                bindAction: '#doadd', //手动提交
                before: function(obj) {
                    //文件上传时 附带表单参数
                    this.data = {
                        'lx': datafo.roles,
                        'bt': datafo.title,
                        'code': datafo.code,
                        'hc': datafo.hcfs
                    };
                },
                //选择文件后预览
                choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        $('#test8').text('已选择');
                        $('#demo1').attr('src', result); //图片链接(base64)

                    });
                },
                done: function(res) {
                    layer.msg('上传成功');
                    setTimeout("layer.closeAll()", "1000");
                }

            });

        });
    </script>

为您推荐