该代码通过PHP实现了扫描指定目录下的文件和目录,并按照一定的排序规则进行展示。
用户可以点击目录名称,展开或折叠该目录下的子目录和文件列表。
对于文件,显示了文件名、修改时间和文件大小,并提供了文件链接以在新标签页中打开文件。
对于空目录,显示了"Empty Directory"的提示。此外,代码还提供了文件大小格式化的函数,将文件大小转换为易读的单位(如KB、MB、GB等)。
该代码通过HTML、CSS和JavaScript实现,为网页添加了一种直观和友好的目录浏览方式,方便用户快速查找和访问文件。

-
Directory Listing - "viewport" content="width=device-width, initial-scale=1.0">
-
- body {
- font-family: Arial, sans-serif;
- margin: 20px;
- }
-
- .directory {
- font-weight: bold;
- margin-bottom: 10px;
- cursor: pointer;
- display: flex;
- align-items: center;
- }
-
- .directory-icon {
- margin-right: 5px;
- }
-
- .file {
- margin-left: 20px;
- display: flex;
- align-items: center;
- }
-
- .indent {
- margin-left: 20px;
- }
-
- .collapsed {
- display: none;
- }
-
- .empty-directory {
- background-color: #C0FFC0;
- }
- .table {
- border-collapse: collapse;
- }
-
- td {
- padding: 5px;
- border: none;
- }
-
- .left {
- text-align: left;
- width: 250px; /* 调整大小文本的列宽 */
- }
-
- .center {
- text-align: center;
- width: 180px; /* 调整大小文本的列宽 */
- }
-
- .right {
- text-align: right;
- width: 110px; /* 调整大小文本的列宽 */
- }
-
-
-
- function toggleDirectory(element) {
- var subDirectory = element.nextElementSibling;
- if (subDirectory.style.display === 'none') {
- subDirectory.style.display = 'block';
- } else {
- subDirectory.style.display = 'none';
- }
- }
-
Directory Listing
class="table">- <tr>
- <td class="left">文件名td>
- <td class="center">Date 修改时间td>
- <td class="right">大小td>
- tr>
- table>
- <div style="width:650px;">
- <hr>
- php
- function listDirectoriesAndFiles($dir, $indent = '') {
- $result = '';
-
- // 扫描当前目录下的文件和目录
- $files = scandir($dir);
-
- $directories = [];
- $filesList = [];
-
- foreach ($files as $file) {
- if ($file === '.' || $file === '..') {
- continue;
- }
-
- $filePath = $dir . '/' . $file;
-
- if (is_dir($filePath)) {
- // 如果是目录,将目录名添加到 $directories 数组
- $directories[] = $file;
- } else {
- // 如果是文件,将文件名添加到 $filesList 数组
- $filesList[] = $file;
- }
- }
-
- // 对目录和文件列表进行排序
- sort($directories);
- sort($filesList);
-
- // 输出目录列表
- foreach ($directories as $directory) {
- $subDirectoriesAndFiles = listDirectoriesAndFiles($dir . '/' . $directory, $indent . '');
-
- $result .= '';
- $result .= $indent . '' . $directory . '->';
- $result .= '';
-
- $result .= '';
- $result .= $subDirectoriesAndFiles;
- $result .= '';
- }
-
- $result .= '
';- // 输出文件列表
- foreach ($filesList as $file) {
- $filePath = $dir . '/' . $file;
- $fileSize = filesize($filePath);
- $fileSizeFormatted = formatFileSize($fileSize);
- $fileModified = date("Y-m-d H:i:s", filemtime($filePath));
-
- $result .= '
';- $result .= '
' . $fileModified . ' '; - $result .= '
' . $fileSizeFormatted . ' '; - $result .= '
'; - }
- $result .= '
'; - $result .= '';
-
-
- if (empty($directories) && empty($filesList)) {
- $result .= '';
- $result .= $indent . 'Empty Directory';
- $result .= '';
- }
-
- return $result;
- }
-
- function formatFileSize($size) {
- $units = array('B', 'KB', 'MB', 'GB', 'TB');
- $i = 0;
- while ($size >= 1024 && $i < 4) {
- $size /= 1024;
- $i++;
- }
- return round($size, 2) . $units[$i];
- }
-
- // 获取当前目录路径
- $dir = './';
-
- // 获取当前目录下的所有目录和文件
- $directoriesAndFiles = listDirectoriesAndFiles($dir);
-
- // 输出目录和文件列表
- echo $directoriesAndFiles;
- ?>
-
第二种使用div

-
Directory Listing -
- body {
- font-family: Arial, sans-serif;
- margin: 20px;
- }
-
- .directory {
- font-weight: bold;
- margin-bottom: 10px;
- cursor: pointer;
- display: flex;
- align-items: center;
- }
-
- .directory-icon {
- margin-right: 5px;
- }
-
- .file {
- margin-left: 20px;
- }
-
- .file a {
- text-decoration: none;
- color: #0000EE;
- }
-
- .file a:hover {
- text-decoration: underline;
- }
-
- .indent {
- margin-left: 20px;
- }
-
- .collapsed {
- display: none;
- }
-
- .file-size {
- margin-right: 50px;
- }
-
-
- function toggleDirectory(element) {
- var subDirectory = element.nextElementSibling;
- if (subDirectory.style.display === 'none') {
- subDirectory.style.display = 'block';
- } else {
- subDirectory.style.display = 'none';
- }
- }
-
Index of /Directory Listing/
-
-
- "width:650px;">
- class="file">
- <span style="margin-right: 265px;">文件/文件夹span>
- <span style="margin-right: 95px;">大小span>
- <span class="file-modified" >Date 修改时间span>
- div>
- <hr>
- php
- function listDirectoriesAndFiles($dir, $indent = '') {
- $result = '';
-
- // 扫描当前目录下的文件和目录
- $files = scandir($dir);
-
- $directories = [];
- $filesList = [];
-
- foreach ($files as $file) {
- if ($file === '.' || $file === '..') {
- continue;
- }
-
- $filePath = $dir . '/' . $file;
-
- if (is_dir($filePath)) {
- // 如果是目录,将目录名添加到 $directories 数组
- $directories[] = $file;
- } else {
- // 如果是文件,将文件名添加到 $filesList 数组
- $filesList[] = $file;
- }
- }
-
- // 对目录和文件列表进行排序
- sort($directories);
- sort($filesList);
-
- // 输出目录列表
- foreach ($directories as $directory) {
- $result .= '';
- $result .= $indent . '' . $directory . '->';
- $result .= '';
- $result .= '';
- $subDirectoriesAndFiles = listDirectoriesAndFiles($dir . '/' . $directory, $indent . '');
- $result .= $subDirectoriesAndFiles;
- $result .= '';
- }
-
- // 输出文件列表
- foreach ($filesList as $file) {
- $filePath = $dir . '/' . $file;
- $fileSize = filesize($filePath);
- $fileSizeFormatted = formatFileSize($fileSize);
- $fileModified = date("Y-m-d H:i:s", filemtime($filePath));
- $result .= '
- $result .= '' . $fileModified . '';
- $result .= '' . $fileSizeFormatted . '';
- $result .= '';
- }
- $result .= '
'; - return $result;
- }
-
- function formatFileSize($size) {
- $units = array('B', 'KB', 'MB', 'GB', 'TB');
- $i = 0;
- while ($size >= 1024 && $i < 4) {
- $size /= 1024;
- $i++;
- }
- return round($size, 2) . $units[$i];
- }
-
- // 获取当前目录路径
- $dir = './';
-
- // 获取当前目录下的所有目录和文件
- $directoriesAndFiles = listDirectoriesAndFiles($dir);
-
- // 输出目录和文件列表
- echo $directoriesAndFiles;
- ?>
-
-
-
相关阅读:
ArcGIS10.1软件安装教程
一、ubuntu-django+nginx+uwsgi:ubuntu系统部署django项目,前后端不分离项目
springboot基于web模式的师资管理系统的设计与实现毕业设计源码040928
.Net 6.0定义全局当前身份缓存对象
053-第三代软件开发-元对象系统
Qcom查看算法库编译工具版本的方法
DispatcherServlet初始化之遍历HandlerMethod
#LLM入门|prompt#【整合目录】面向开发者的LLM入门教程
Mybitis与Spring集成
Flutter 启动流程解析
-
原文地址:https://blog.csdn.net/BG1230521/article/details/133620941