文件管理器基本展示页面

上一章验证码功能提到的看不清换一张的功能代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script >
    var change=document.getElementById('change_code');
    var code_img=document.getElementById('code_img');
    change.onclick=function () {
        code_img.src='code.php?time='+new Date();
        return false;
    }
</script>
<body>
<form action="check.php" method="post">
    用户名：<input type="text" id="username" name="username"/><br>
    密码：<input type="password" id="password" name="password" /><br>
    验证码：<input type="text" id="code" name="code" /><img id="code_img" src="code.php" /><a id="change_code" href="">看不清，换一张</a><br>
    <div id="error_message" style="color: red"></div>
    <input type="submit" id='login' name='login' value="登录">
</form>
</body>
</html>

效果图展示：

微信图片_20180301111913.png

点击之后展示：

微信图片_20180301111920.png

以上为上一章最后一节留下的问题，接下来看本节的内容，这一节是做一个类似windows文件管理器

设计思路：

首先找到当前目录，确定当前目录是文件还是目录，通过以下代码可以查看当前目录下的所有文件和目录的信息

微信图片_20180301155316.png

具体代码如下:

<?php
function getFileList($path){
    //保存打开文件的句柄
    $handle=opendir($path);
    //保存文件列表数组,dir保存目录,file保存文件
    $list=array('dir'=>array(),'file'=>array());
    //循环遍历文件列表
    while(false!==($filename=readdir($handle))){
        //排除当前目录和父级目录
        if($filename!='.' && $filename!='..'){
            //处理文件路径和文件名
            $filepath="$path/$filename";
            //根据路径获取文件类型
            $filetype=filetype($filepath);
            //如果既不是文件也不是目录,则跳过
            if(!in_array($filetype,array('file','dir'))){
                continue;
            }
            //将文件信息保存到数组中
            $list[$filetype][]=array(
                //保存文件名和路劲
                'filename'=>$filename,
                'filepath'=>$filepath,
                //保存各种属性
                'filesize'=>round(filesize($filepath)/1024),
                'filemtime'=>date('Y/m/d H:i:s',filemtime($filepath)),
            );
        }
    }
    //关闭文件句柄
    closedir($handle);
    return $list;
$path=".";
$file_list=getFileList($path);
echo "<pre>";
print_r($file_list);
echo "</pre>";

目录结构如下:

打印结果如下:

微信图片_20180301153739.png

然后仿照windows目录文件夹设置html页面,并对上面打印的file_list进行遍历.

filemanager_html.php代码如下:

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/3/1 0001
 * Time: 下午 1:54
 */
?>
<html>
<head>
    <meta charset="utf-8">
    <title>文件管理器</title>
</head>
<body>
<!--文件列表区-->
<table>
    <tr><th>名称</th><th>修改日期</th><th>大小</th><th>操作</th></tr>
<!--    循环输出目录列表-->
    <?php
    foreach ($file_list['dir'] as $v):
    ?>
    <tr><td><img src="./img/dir.png"><?php echo $v['filename'];?></td>
        <td><?php echo $v['filename'];?></td>
        <td>-</td>
        <td><a href="">打开</a></td>
    </tr>
    <?php endforeach;?>
<!--    循环输出文件列表-->
    <?php
    foreach($file_list['file'] as $v):
    ?>
    <tr>
        <td><img src="./img/file.png"><?php echo $v['filename'];?></td>
        <td><?php echo $v['filemtime'];?></td>
        <td><?php echo $v['filesize'];?>KB</td>
        <td>
            <a href="">重命名</a><a href="">复制</a><a href="">删除</a>
        </td>
    </tr>
    <?php endforeach;?>
</table>
</body>
</html>

运行结果展示:

微信图片_20180301160412.png