检测文件目录及其子文件到底的代码-实现可展开的目录列表和文件浏览功能的HTML代码

最新推荐文章于 2024-05-12 15:33:48 发布
最新推荐文章于 2024-05-12 15:33:48 发布
阅读量672 收藏 2
点赞数
文章标签： 开发语言 php 目标检测
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BG1230521/article/details/133620941
版权

此实现了一个可展开的目录列表和文件浏览功能

该代码通过PHP实现了扫描指定目录下的文件和目录，并按照一定的排序规则进行展示。

用户可以点击目录名称，展开或折叠该目录下的子目录和文件列表。

对于文件，显示了文件名、修改时间和文件大小，并提供了文件链接以在新标签页中打开文件。

对于空目录，显示了"Empty Directory"的提示。此外，代码还提供了文件大小格式化的函数，将文件大小转换为易读的单位（如KB、MB、GB等）。

该代码通过HTML、CSS和JavaScript实现，为网页添加了一种直观和友好的目录浏览方式，方便用户快速查找和访问文件。

<!DOCTYPE html>
<html>
<head>
    <title>Directory Listing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        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; /* 调整大小文本的列宽 */
        }

    </style>
    <script>
        function toggleDirectory(element) {
            var subDirectory = element.nextElementSibling;
            if (subDirectory.style.display === 'none') {
                subDirectory.style.display = 'block';
            } else {
                subDirectory.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<h2>Directory Listing</h2>
<table 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 . '<span class="indent"></span>');

            $result .= '<div class="directory" onclick="toggleDirectory(this)">';
            $result .= $indent . '<span class="directory-icon">&#128194;</span>' . $directory . '->';
            $result .= '</div>';

            $result .= '<div class="collapsed">';
            $result .= $subDirectoriesAndFiles;
            $result .= '</div>';
        }
        
        $result .= '<table class="table file">';
        // 输出文件列表
        foreach ($filesList as $file) {
            $filePath = $dir . '/' . $file;
            $fileSize = filesize($filePath);
            $fileSizeFormatted = formatFileSize($fileSize);
            $fileModified = date("Y-m-d H:i:s", filemtime($filePath));

            $result .= '<tr>';
            $result .= '<td class="left"><a href="' . $filePath . '" target="_blank">' . $file . '</a></td>';
            $result .= '<td class="center">' . $fileModified . '</td>';
            $result .= '<td class="right">' . $fileSizeFormatted . '</td>';
            $result .= '</tr>';
        }
        $result .= '</table>';
        $result .= '<div style="border: 1px dashed green; width: 650px;"></div>';


        if (empty($directories) && empty($filesList)) {
            $result .= '<div class="file empty-directory">';
            $result .= $indent . 'Empty Directory';
            $result .= '</div>';
        }

        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>

</body>
</html>

第二种使用div

<!DOCTYPE html>
<html>
<head>
    <title>Directory Listing</title>
    <style>
        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;
        }
    </style>
    <script>
        function toggleDirectory(element) {
            var subDirectory = element.nextElementSibling;
            if (subDirectory.style.display === 'none') {
                subDirectory.style.display = 'block';
            } else {
                subDirectory.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<h2>Index of /Directory Listing/</h2>


<div style="width:650px;">
<div 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 .= '<div class="directory" onclick="toggleDirectory(this)">';
        $result .= $indent . '<span class="directory-icon">&#128194;</span>' . $directory . '->';
        $result .= '</div>';
        $result .= '<div class="collapsed">';
        $subDirectoriesAndFiles = listDirectoriesAndFiles($dir . '/' . $directory, $indent . '<span class="indent"></span>');
        $result .= $subDirectoriesAndFiles;
        $result .= '</div>';
    }

    // 输出文件列表
    foreach ($filesList as $file) {
        $filePath = $dir . '/' . $file;
        $fileSize = filesize($filePath);
        $fileSizeFormatted = formatFileSize($fileSize);
        $fileModified = date("Y-m-d H:i:s", filemtime($filePath));
        $result .= '<div class="file">' . $indent . '<a href="' . $filePath . '" target="_blank">' . $file . '</a>';
        $result .= '<span style="float: right;">' . $fileModified . '</span>';
        $result .= '<span class="file-size" style="float: right;">' . $fileSizeFormatted . '</span>';
        $result .= '</div>';
    }
    $result .= '<br>';
    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>

</body>
</html>

Mr.洛 白
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML实现文件上传和HTML实现打开文件目录
u014331212的博客
02-12 6840
这里需要注意两个地方： 表单提交方式需要是post form 添加一个属性为enctype="multipart/form-data" 在 index.html 加入input 标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ...
html列出目录文件大小,使用html列出目录中的文件
weixin_29009339的博客
06-07 779
根据您的服务器设置(您仍然必须有一种方法来允许给定目录的目录浏览，使用这个技巧)，有一种方法可以让列表看起来像你想要的那样，但它确实需要更多的工作(比如昆汀提到的)才能以你想要的方式获得一些风格。在这个例子中，我使用jQuery，KnockoutJS和CSS来读取目录的内容(我没有做任何服务器端的特殊技巧......这是我的Apache服务器的默认目录列表模式返回目录列表页面)。我把它放到一个非常...
HTML使用相对路径获取各级目录下文件方式详解
01-19
相对路径的概念 以当前文件所在位置为参考点，建立目标文件的路径。 绝对路径的概念 整个文件的完整路径，比如X:\www\web\index.html，或者 http://waldo.com.cn/index.html 。这两者都属于绝对路径。 相对路径多种使用方式详解 假设当前有一个页面，要链接到一个页面名称为test.html的页面，以下展示多种相对路径的表达方式 相对路径范例 路径所表示的含义 href=test.html 表示此页面就在当前页面所在目录下 href=./test.html 表示此页面就在当前页面所在目录下，单个点和上面直接文件名表示的意思是一样的
Vue3实战uu云盘（二）：文件列表+新建目录+文件重命名+文件上传
最新发布
m0_73560798的博客
05-12 801
上传任务（仅展示本次上传任务）
给html5一个绝对路径自动扫描文件,使用appscan实现多站扫描简单自动化
weixin_33404102的博客
05-30 529
摘要: appscan的GUI界面新建扫描任务时虽然只能指定一个target，并且也没有提供类似awvs/nessus的web接口，但是它提供的有一个“AppScanCMD.exe”，利用该工具，就可以以DOS命令的方式来批量、自动化执行扫描任务。 …随着年龄增长，身上负担的压力也越来越大。在工作中很多时候都会需要短时间内扫描多个网站，可能是平时时间不够，或者是客户特别要求，很多时候工作中的扫描工...
列出目录下所有文件--自用
qq_33281259的博客
04-16 198
function dir_path($path) { $path = str_replace('\\', '/', $path); if(substr($path, -1) != '/') $path = $path . '/'; return $path; } //文件目录，查询后缀，返回的数组，去除的后缀 function dir_list($path, $exts = '', $list = array(),$no_exts='') { $path = dir_path($path); $f
html php上传并显示目录下文件并提供下载和上传
qq_37552111的博客
02-11 376
【代码】html php上传并显示目录下文件并提供下载和上传。
软著代码整理工具，可以实现一键提取文件中的代码并且自动删去空行和注释，便于进行软著申请
03-13
1. **一键提取文件中的代码**：此工具的核心功能之一是能够快速从各种类型的代码文件中提取出有效的源代码。这包括但不限于.java、.cpp、.py、.js等常见编程语言的文件。通过自动化处理，避免了手动筛选的繁琐工作，...
C# ListView显示磁盘目录文件及图标,右键能打开文件、删除文件(源代码)
05-28
当用户点击文件鼠标右键时，会在相应文件下弹出菜单栏ContentMenuStrip控件，显示“打开文件”和“删除文件”.点击打开文件会通过电脑默认方式打开文件，包括txt\Office\视频mp4 avi等,当删除文件，文件会删除至回收...
C# FTP递归下载文件（子目录和子目录中的文件）
10-25
在本文中，我们将深入探讨如何使用C#编程语言实现FTP（File Transfer Protocol）递归下载功能，以便能够从服务器获取整个目录结构，包括子目录及其内的所有文件。这个任务适用于那些需要从FTP服务器批量下载数据的...
ExamDiff Pro - 可视化文件和目录比较工具 3.3
05-26
ExamDiff Pro 是一个可视化的文件和目录比较工具，它具有一系列简单方便的比较功能 (可比 Beyond Compare 方便好用多了！)。 - 比较文本文件,二进制文件和目录。 - 高亮不同差异 (深入到行、词、字符级别)。 - ...
列出指定目录下的所有文件和目录
01-02
<%@ LANGUAGE = VBScript %> <%Server.ScriptTimeout=5000%> <html> <head> <style TYPE=text/css> /* Outline Style Sheet */ UL UL {display: none; margin-left: 20pt} </style> [removed] function checkParent(src, dest) { // Search for a specific parent of the current element wh
Qt删除一个目录下所有文件和文件夹
09-07
使用`QDir::entryList()`或`QDir::entryInfoList()`方法可以获取目录下的文件和子目录列表。你可以指定过滤器（如只获取文件或只获取目录）和排序方式。 ```cpp QDir dir("path/to/directory"); QStringList ...
html遍历文件夹,JS如何遍历一个文件夹下的所有文件与目录
weixin_39795268的博客
06-18 1478
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://jingcu.blogbus.com/logs/49249228.htmlfunction searchFiles(){var fso = new ActiveXObject("Scripting.FileSystemObject");var f = fso.GetFolder(document.all.fixfolde...
【HTML】HTML 标签 ④ ( 文件路径 | 相对路径 | 绝对路径 | 同级目录 | 下一级目录 | 上一级目录 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-06 3660
一、文件路径、 1、绝对路径、 2、相对路径 ( 同级目录访问 | 下级目录访问 | 上级目录访问 )
单文件php目录列表源码,分享个漂亮的php目录列表源码。(很多人问我的)
weixin_36416921的博客
04-02 1233
效果演示：https://files.photo.gallery/demo设置说明：https://forum.photo.gallery/viewtopic.php?f=66&t=9964更多支持图片信息功能显示：https://files.photo.gallery/demo/?samples例如图片使用的相机，GPS信息，等等。支持在线播放 视频 音乐 和内置显示某些语言文件代码这些...
目录php源码,一款漂亮的php目录列表源码（适合图站、文件管理)
weixin_39627430的博客
03-10 1431
手机端这是一款漂亮的PHP目录列表源码使用方法：直接上传index.php文件就可以使用了，你没看错，只有一个单文件！PHP需要安装GD、mbstring、fileinfo和exif扩展宝塔默认安装了GD、mbstring扩展，我们只需要在PHP那里安装fileinfo和exif扩展即可，如果不是宝塔的，就需要都安装，另外需要重启php设置说明：https://forum.photo.galler...
html中的＜iframe＞＜/iframe＞标签
Learning_xzj的博客
07-26 7927
什么是iframe标签？ iframe标签是一个双标签/围堵式标签<iframe></iframe>，是一个内联框架 iframe标签的作用？ 用于在当前的HTML页面中嵌入另一个文档，比如当好几个页面都有大部分的相同内容（相同的页面头部和底部），那么这些相同的页面部分可以放在新的页面中，然后就可以使用<iframe> 标签将重复的内容嵌入到各个页面中。 iframe标签的优点？ 使用iframe标签的好处是可以减少代码的重复...
Ubuntu文件目录管理教程：初学者入门与实践
本资源是一份针对初学者和自学者设计的Ubuntu操作系统-文件和目录管理PPT教学资料。它涵盖了Linux操作系统的基础操作和关键概念，有助于用户深入理解Ubuntu环境下的工作流程。 首先，PPT以实践为导向，引导学生了解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值