<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./jquery-1.9.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.add_file {
width: 350px;
height: 38px;
box-sizing: border-box;
position: relative;
}
.add_file::after {
content: '';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.add_file button {
float: left;
}
.show_files {
width: 200px;
height: 38px;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
line-height: 38px;
color: black;
font-size: 14px;
margin-left: 94px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.add_file .cover_add {
position: absolute;
left: 0;
top: 0;
width: 98px;
height: 38px;
z-index: 3;
background: transparent;
display: none;
}
</style>
</head>
<body>
<div class="add_file">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<div class="show_files"></div>
<div class="cover_add"></div>
</div>
<script src="./layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
let obj = {
suc: false
}
$('.add_file').click(function () {
if (!obj.suc) {
obj.suc = true;
isAdd();
}
})
$('.add_file > .show_files').click(function (e) {
return false;
})
function isAdd() {
obj.suc ? $('.cover_add').show() : $('.cover_add').hide();
}
layui.use(['upload', 'element', 'layer'], function () {
upload = layui.upload,
element = layui.element,
layer = layui.layer;
$('.show_files').html('未选中文件');
//常规使用 - 普通图片上传
//选完文件后不自动上传
upload.render({
elem: '#test8',
url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
,
auto: true,
choose: function (obj) {
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
$('.show_files').html(file.name ? file.name : '未选中文件');
});
},
before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
},
// bindAction: '#test9',
done: function (res) {
layer.closeAll('loading'); //关闭loading
layer.msg('上传成功');
obj.suc = false;
isAdd()
},
error: function () {
layer.closeAll('loading'); //关闭loading
console.log(obj, '空')
obj.suc = false;
isAdd();
}
});
})
</script>
</body>
</html>
View Code