layui 上传文件限制文件

<!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
layui 上传文件 限制文件

layui 上传文件限制文件
