blog_tp6/view/sys/file_manager/explorer.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-20">
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            <a class="btn radius btn-default" href="{:url('index')}"><i
                    class="Hui-iconfont Hui-iconfont-pages"></i>数据库模式</a>
            <a class="btn radius btn-secondary"><i class="Hui-iconfont Hui-iconfont-jifen"></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()">
            <input type="hidden" id="activepath" name="activepath" value="{$activepath}">
            <div class="progress">
                <div></div>
            </div>
        </span>
        <span class="r">共有：
            <strong>{$counts}</strong> 个对象</span>
    </div>
    <div class="cl mt-20">
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th width="25%">
                        <strong>文件名</strong>
                    </th>
                    <th width="16%">
                        <strong>文件大小</strong>
                    </th>
                    <th width="22%">
                        <strong>最后修改时间</strong>
                    </th>
                    <th width="34%">
                        <strong>操作</strong>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-c" bgcolor='#FFFFFF' height='26' onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td>
                        {notempty name="activepath"}<i class="Hui-iconfont Hui-iconfont-arrow1-top"></i>{/notempty}
                        <a href="/sys/file_manager/explorer?activepath={$activeurl}">上级目录</a>
                    </td>
                    <td>当前目录:
                        <span style="color:#f00;"> ./storage{$activepath} </span> 　
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                {foreach $dirs as $dir}
                <tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td style="text-align:left;">
                        <img src=/static/images/icon/dir.png>
                        <a href="/sys/file_manager/explorer?activepath={$activepath.'/'.$dir}">
                            {$dir}
                        </a>
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                        <a class="btn" onclick="del_dir(this, '{$activepath}/{$dir}')">删除</a>
                    </td>
                </tr>
                {/foreach}
                {foreach $files as $file}
                <tr class="text-c" bgcolor='#FFFFFF' height='26' onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td style="text-align:left;">
                        <img src="/static/images/icon/{$file['extension']}.png">
                        <a href="/storage{$activepath}/{$file['filename']}" target="_blank">
                            {$file['filename']}
                        </a>
                    </td>
                    <td align='center'> {$file['size']} </td>
                    <td align='center'> {$file['time']|date="Y-m-d H:i:s"} </td>
                    <td>
                        <a href="/storage{$activepath.'/'.$file['filename']}" class="btn radius btn-primary"
                            target="_blank">查看/下载</a>&nbsp;
                        <a class="btn radius btn-danger"
                            onclick="del_file(this,'{$activepath}/{$file.filename}')">删除</a>&nbsp;
                        <!-- <a href='' class="btn" >移动</a> -->
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    /*删除图片*/
    function del_dir(obj, dir) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('deldir', {
                'dir': dir
            }, function (res) {
                if (res.code == 0) {
                    $(obj).parents('tr').remove();
                    topalert({
                        type: 0,
                        content: res.msg,
                        speed: 1000
                    });
                } else {
                    topalert({
                        type: 2,
                        content: res.msg,
                        speed: 2000
                    });
                }
                layer.close(layer.index);
            }, 'json');
        });
    }

    /*删除图片*/
    function del_file(obj, filename) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('delfile', {
                'filename': filename
            }, function (res) {
                if (res.code == 0) {
                    $(obj).parents('tr').remove();
                    topalert({
                        type: 0,
                        content: res.msg,
                        speed: 1000
                    });
                } else {
                    topalert({
                        type: 2,
                        content: res.msg,
                        speed: 2000
                    });
                }
                layer.close(layer.index);
            }, 'json');
        });
    }

    //通过点击图片来触发文件上传按钮
    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();

        formData.append('activepath', $('#activepath').val());

        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;
                }
            }
        });
    }
</script>
<!--请在上方写此页面业务相关的脚本-->