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;
        display: -webkit-inline-box;
    }

    /* 初始状态设置进度条宽度为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-danger radius" onclick="del_all();"><i class="Hui-iconfont Hui-iconfont-del2"></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>文件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.filepath}</a>
                    </td>
                    <td>{$val.fileextension}</td>
                    <td>{$val.filesize|format_bytes}</td>
                    <td>{$val.username}</td>
                    <td>{$val.filetime|date="Y-m-d H:i:s"}</td>
                    <td class="td-manager">
                        <a class="btn btn-secondary radius" title="编辑title" onClick="editTitle('{$val.fileid}','{$val.title}')"><i
                            class="Hui-iconfont Hui-iconfont-edit"></i></a>
                        <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 uploadFile = $("#upload_file").get(0).files;
        // console.log(uploadFile);
        if (uploadFile == undefined || uploadFile == null) {
            layer.msg("请选择文件", { icon: 5, time: 1000 });
            return false;
        }

        if (uploadFile.length > 20) {
            layer.msg("最多20个文件", { icon: 5, time: 1000 });
            return false;
        }

        let formData = new FormData();

        for (let i = 0; i < uploadFile.length; i++) {
            formData.append('upload_file[]', uploadFile[i]);
        }

        $.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 == 0) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    });
                    window.location.reload();
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
            }
        });
    }

    function editTitle(id, title) {
        if (id==0) {
            layer.msg('id不可为空', {icon: 5,time: 1000});
        }

        var content  = '<div  class="cl" style="padding:20px;">';
            content += '<label class="form-label col-sm-4">';
            content += '<span class="c-red">*</span>文件title：</label>';
            content += '<div class="formControls col-sm-6">';
            content += '<input type="text" class="input-text" name="filetile" id="filetile">';
            content += '</div><div class="col-3"></div></div></div>';

        layer.open({
            type: 1,
            area: ['500px', '200px'],
            title: '修改文件title',
            content: '\<\div style="padding:20px;">\<\span class="c-red">*\<\/span>文件title：\<\input type="text" class="input-text" name="filetitle" value="'+title+'" id="filetitle">\<\/div>',
            btn: ['确定', '取消'],
            yes: function(index, layero){
                let filetitle = document.querySelector('input[name="filetitle"]').value;
                $.ajax({
                    url: '{:url("file_manager/updateFileTitle")}',
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        id: id,
                        filetitle: filetitle
                    }),
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            });
                            window.location.reload();
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 1000
                            });
                        }
                        layer.close(index);
                    }
                });
            }
        });
        
        // layer.open({
        //     type: 2,
        //     area: ['700px', '500px'],
        //     fix: false, //不固定
        //     maxmin: true,
        //     shade: 0.4,
        //     title: '添加标题图',
        //     content: 'test'
        // });
    }
</script>