引用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: '提示'
});
}
});