layui 上传文件限制文件

Posted 2021-12-03 !加油吧骚年！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于layui 上传文件限制文件的主要内容，如果未能解决你的问题，请参考以下文章

layui多图片上传，限制重复图片，限制数量

【layui】上传文件时进行校验是不是选择文件

layui 上传文件 限制文件

layui 上传文件限制文件