layui上传文件弹框之前的表单校验

引用layui之后,用到上传excel文件然后以表格形式回显。

需求是在点击上传的按钮之前需要进行一个表单的验证(才能掉后台接口)

方法新加一个按钮来作为点击上传的按钮addBtn(真正的上传的按钮uploadBtn需要隐藏起来)然后让addBtn覆盖upload上面(可以用层级z-index来控制)当点击addBtn是(前提表单验证进行之后),主动唤醒uploadBtn的点击事件

 
    /* 新增样式 */
    .box {
        float: left;
        position: relative;
    }

    .box button {
        position: absolute;
    }

    #commit {
        z-index: 99;
    }

  

      <div class="box">
           <button class="layui-btn wordBtn" data-type="reload" id="commit">
                  校验(import)
           </button>
         <button class="layui-btn wordBtn hide" data-type="reload" id="upload" lay-filter="import">
                  import
         </button>
     </div>    

  

//隐藏按钮 报表上传
        $('#commit').on('click', function () {
            var val = $("#expressType").val();
            if (val) {
                console.log('唤起点击')
                $('#upload').click();
            } else {
                layer.alert("请选择服务类型", {
                    icon: 2, title: '提示'
                });
            }
        })
        var uploadInst = upload.render({
            elem: "#upload", //绑定元素
            auto: true,
            accept: 'file',
            url: 'url', //上传接口

            before: function (obj) {
                loadingIndex = layer.msg('文件上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
                this.data={//传给后台的参数
                    'type':$("#expressType").val(),
                    'expressType':tabType
                }
            },
        done: function (res) {
                console.log(res)
                let url = 'url';
                if (res.code == '200') {
                    layer.close(loadingIndex);
                    layer.alert(res.message);
                    //上传完毕回调
                    if (tabType == 2) {
                        tableDFun(url,'')
                    } else {
                        tableDS(url,'')
                    }
                } else {
                    layer.alert(res.message);
                }
            },
            error: function () {
                //请求异常回调
                layer.alert("上传错误", {
                    icon: 2, title: '提示'
                });
            }
        });

 

   

 

posted @ 2020-06-15 16:40  浪ANDlang  阅读(3624)  评论(0编辑  收藏  举报