blog_tp6/view/sys/file_manager/directory_picture.html

<div class="row cl">
    <table class="table table-border table-bordered table-bg">
        <thead>
            <tr class="text-c">
                <th>
                    <strong>文件名</strong>
                </th>
                <th>
                    <strong>文件大小</strong>
                </th>
                <th>
                    <strong>最后修改时间</strong>
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var data = {
        dirs: [],
        files: [],
        activeurl: '',
        activepath: ''
    }

    function maketbody() {
        let tbhtml = '';
        tbhtml += '<tr class="text-c" bgcolor="#FFFFFF" height="26" onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
        tbhtml += '<td>'+(data.activeurl ? '<i class="Hui-iconfont Hui-iconfont-arrow1-top"></i>' : '') +'<a onclick="onlinepicture(\''+data.activeurl+'\')">上级目录</a></td>'
        tbhtml += '<td>当前目录:<span style="color:#f00;"> ./storage'+data.activepath+'</span></td><td></td></tr>'

        data.dirs.forEach((dir) => {
            tbhtml += '<tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
            tbhtml += '<td style="text-align:left;"><img src="/static/images/icon/dir.png">'
            tbhtml += '<a onclick="onlinepicture(\''+data.activepath+'/'+dir+'\')">'+dir+'</a></td><td></td><td></td></tr>'
        });

        data.files.forEach((file) => {
            tbhtml += '<tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
            tbhtml += '<td style="text-align:left;"><img src="/static/images/icon/'+file.extension+'.png">'
            tbhtml += '<a onclick="selcetimg(\'/storage'+data.activepath+'/'+file.filename+'\')">'+file.filename+'</a></td>'
            tbhtml += '<td>'+file.size+'</td><td></td></tr>'
        });

        document.querySelector('table tbody').innerHTML = tbhtml;
    }

    function onlinepicture(activepath) {        
        $.ajax({
            url: '{:url("file_manager/explorer")}',
            type: 'GET',
            async: true,
            cache: false,
            data: 'activepath='+activepath,
            processData: false,
            contentType: 'application/x-www-form-urlencoded',
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    // console.log(res);
                    data.dirs       = res.dirs
                    data.files      = res.files
                    data.activeurl  = res.activeurl
                    data.activepath = res.activepath

                    maketbody();
                }
            }
        });
    }

    function selcetimg(img) {
        $("#online_file").val(img);
    }

    onlinepicture(data.activepath);
</script>