blog_tp6/view/sys/file_manager/index.html

<style>
.progress {
    width: 600px;
    height: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0px;
    overflow: hidden;
}

/* 初始状态设置进度条宽度为0px */
.progress>div {
    width: 0px;
    height: 100%;
    background-color: yellowgreen;
    transition: all .3s ease;
}
</style>
<article class="cl pd-10">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a class="btn radius btn-secondary"><i class="Hui-iconfont Hui-iconfont-jifen"></i>数据库模式</a>
            <a class="btn radius btn-default" href="{:url('explorer')}"><i class="Hui-iconfont Hui-iconfont-pages"></i> 目录模式 </a>
            <a class="btn btn-primary radius" onclick="uploadFile();"><i class="Hui-iconfont Hui-iconfont-add"></i>上传附件</a>
            <input type="file" id="upload_file" hidden multiple onchange ="fileChange()">
            <div class="progress">
                <div></div>
            </div>
        </span>
        <span class="r">共有数据：<strong id="total">{$list->total()}</strong>条</span>
    </div>

    <div class="cl mt-20">
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th width="25px;">
                        <input type="checkbox" name="allcheck" value="">
                    </th>
                    <th width="60px;">ID</th>
                    <th width="120px;">文件title</th>
                    <th style="min-width: 260px;">文件名</th>
                    <th>文件类型</th>
                    <th>文件大小</th>
                    <th>增加者</th>
                    <th>增加时间</th>
                    <th width="100px;">操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $list as $val}
                <tr class="text-c">
                    <td>
                        <input type="checkbox" value="{$val.fileid}" name="checkbox[]">
                    </td>
                    <td>{$val.fileid}</td>
                    <td class="text-l">{$val.title}</td>
                    <td class="text-l">
                        <a href="{$val.filepath}" title="{$val.filepath}" target="_blank">{$val.filename}</a>
                    </td>
                    <td>{$val.fileextension}</td>
                    <td>{$val.filesize|format_bytes}</td>
                    <td>{$val.username}</td>
                    <td>{$val.filetime|date="Y-m-d"}</td>
                    <td><a class="btn btn-danger radius" title="删除" onClick="del(this,'{$val.fileid}')"><i class="Hui-iconfont Hui-iconfont-del2"></i></a></td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
</article>

<script>
    //通过点击图片来触发文件上传按钮
    function uploadFile(params) {
        $("#upload_file").click();
    }

    // 上传处理
    function fileChange() {
        let data = $("#upload_file").get(0).files;
        console.log(data);
        if (data == undefined || data == null) {
            layer.msg("请选择视频文件", { icon: 5, time: 1000 });
            return false;
        }

        let formData = new FormData();
        formData.append("upload_file", data);
        $.ajax({
            url: '{:url("file_manager/uploadFile")}',
            type: 'post',
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new XMLHttpRequest();
                //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                xhr.upload.addEventListener('progress', function (e) {
                    console.log(e);
                    //loaded代表上传了多少
                    //total代表总数为多少
                    var progressRate = (e.loaded / e.total) * 100 + '%';

                    //通过设置进度条的宽度达到效果
                    $('.progress > div').css('width', progressRate);
                })

                return xhr;
            },
            success: function (res) {
                console.log(res);
                if (res.code == 1) {
                    layer.msg(data.msg, {
                            icon: 5,
                            time: 1000
                        });
                    window.location.reload();
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
            }
        });
    }

</script>