<!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>