<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0; list-style: none;}
body>.father{
margin:20px 0 0 20px;
}
b{ display: inline-block; width: 26px;}
i{
display: inline-block; width: 15px; height: 15px; margin-right: 3px;
position: relative; top: 1px; cursor: pointer;
}
.child-dir i:before{
content: '';
display: inline-block;
width: 15px; height: 15px;
background: url('./images/dir.png');
background-size: 15px;
}
.child-file i:before{
content: '';
display: inline-block;
width: 15px; height: 15px;
background: url('./images/file.png');
background-size: 15px;
}
.father{ display: none; }
.father:first-child{ display: block; }
</style>
<script src="./jquery.js"></script>
<script>
$(function(){
$('.child-dir i').click(function(){
$(this).parent().next('.father').toggle();
});
});
</script>
</head>
<body>
<?php
header('Content-type:text/html;charset=utf-8');
function showAllFiles($fileName,$bar=''){
echo '<div class="father">';
// 打开资源句柄
$handle = opendir($fileName);
// 读取 . 和 ..
$file = readdir($handle);
$file = readdir($handle);
// 遍历
while($file = readdir($handle)){
// 将文件名拼接成目录
$newFile = $fileName.'/'.$file;
// 将文件编码转为utf-8
$file = iconv('gbk', 'utf-8', $file);
// 判断是否是目录
if(is_dir($newFile)){
// 如果是目录 再次调用showAllFiles()
echo '<div class="child-dir">'.$bar.'<i></i>'.$file.'</div>';
// $bar .='<b></b>';
showAllFiles($newFile,$bar.'<b></b>');
}else{
// 如果不是输出文件信息
echo '<div class="child-file">'.$bar.'<i></i><a href="'.$newFile.'">'.$file.'</a></div>';
}
}
echo "</div>";
closedir($handle);
}
showAllFiles('../');
?>
</body>
</html>
运行结果: