zoukankan      html  css  js  c++  java
  • 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: '提示'
                    });
                }
            });
       
  • 相关阅读:
    matlab 函数库
    阿甘的珠宝 大数据博弈综合应用 SG函数 + 最后取为输或赢
    hdu 1536 博弈 SG函数(dfs)
    hdu 1907 John / 2509 Be the Winner 博弈 最后取完者为输
    深入理解 Nim 博弈
    SG函数模板 hdu 1848/1847/1849/1850/1851
    初始博弈 hdu 1846 Brave Game
    乘数密码 扩展欧几里得求逆元
    68.最大k乘积问题 (15分)
    第一次作业
  • 原文地址:https://www.cnblogs.com/shiraly/p/13131780.html
Copyright © 2011-2022 走看看