文件管理器基本展示頁面LOGIN

文件管理器基本展示頁面

上一章驗證碼功能提到的看不清楚換一張的功能代碼如下:

<!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>";

#目錄結構如下:

微信图片_20180301155556.png

列印結果如下:

微信图片_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


#執行結果展示:

###############那麼,對檔案目錄具體的開啟,重新命名,複製和刪除操作怎麼進行呢? (下一節將進行講解)#######下一節
<?php echo "文件管理器的基本展示事例"
章節課件