如何使用 php 链接和浏览子目录

Question

I want to make a simple file browser using PHP. As I am new here in PHP. I need some push,

<table class="table">
  <thead>
    <tr>
      <th scope="col">Directory Name</th>
      <th scope="col">Last Modified</th>
      <th scope="col">Size</th>
    </tr>
  </thead>
  <tbody>
  <?php
        $folders= new DirectoryIterator(__DIR__);
        while($folders->valid()){

    ?>
    <tr>

      <td><?php echo "<a href='{$folders->current()}'>{$folders->current()}</a>" ?></td>
      <td></td>
      <td><?php echo $folders->getSize();?></td>
    </tr>

    <?php

        $folders->next();
    } ?>
  </tbody>
</table>

I have come to this so far. How can I complete that code in order to have a functional file browser using php. Thank you.

Answer 1

Here's a method to do that which also employs a level of security. While this may just be a school project or tutorial, you should always consider security. I have commented below but basically here is what's happening.

You first set a $rootDirectory (which you will have to modify - this one is set to my filesystem). The rootDirectory is as far as you'll allow the browser to go - because as you see, the little .. link at the top of each folder/file list which allows for upward directory traversal and anyone could navigate themselves into stuff you don't want to ever expose.

The links to the listed folders are modified to pass along the path to that folder FROM the root directory. That way no one could fake a link to some inner OS folder. The links pass along this path in a GET variable ( ?dir=/some/path/ ). When the page loads, it looks for that GET variable, adds on the root directory to the beginning and puts it through a couple checks to make sure it's a real directory, that it isn't outside of our rootDirectory, etc. We do this by first converting it with realpath() . The incoming dir variable could be /myRootDirectory/../../../etc/mySecretConfigFile.conf which would pass our check because it has the root directory in it. realpath() removes all those ../ so we can work with it.

 <table class="table">
  <thead>
    <tr>
      <th scope="col">Directory Name</th>
      <th scope="col">Last Modified</th>
      <th scope="col">Size</th>
    </tr>
  </thead>
  <tbody>
  <?php
        // simple security - do not allow the file browser to get out of this root directory
        // SET THIS FOR YOUR SYSTEM
        $rootDirectory = '/Users/laphona/Sites/htdocs';

        // $dir = __DIR__ ;

        if ($_GET && $_GET['dir']) $dir = $rootDirectory . $_GET['dir'];
        else $dir = $rootDirectory;
        $dir = realpath($dir) ; // this takes out the ../ and the ./ and the .. that makes upward traversal possible despite our checks
       
        // if our root directory isn't present in the $dir
        if (strpos($dir, $rootDirectory) === false ) $dir = $rootDirectory ;
        // if our root directory isn't the very first part of the $dir
        if (strpos($dir, $rootDirectory) !== 0 ) $dir = $rootDirectory ;
        $folders= new DirectoryIterator($dir);
        while($folders->valid()){
            // set up the path here to be the direct path to the folder, minus our root directory
            $myPath = str_replace($rootDirectory, '', $folders->getPath()) . "/" . $folders->current();
            $myItem = "<a href='".$_SERVER['PHP_SELF']."?dir={$myPath}'>{$folders->current()}</a>" ;
            // if it's a file just present the name, no link
            if ($folders->isFile()) $myItem = $folders->current();
    ?>
    <tr>

      <td><?php echo $myItem ?></td>
      <td></td>
      <td><?php echo $folders->getSize();?></td>
    </tr>

    <?php

        $folders->next();
    } ?>
  </tbody>
</table>

Answer 2

Strict base path for security, folder navigation with back, file navigation with file content view. DIV layout, no JavaScript and simple PHP.

<?php
$Script = basename(__FILE__);
$RootPath = "F:\Web";
$FileHTML = [];

$Path = realpath("" . (isset($_GET["Path"]) ? $_GET["Path"] : $RootPath) . "" . (isset($_GET["Folder"]) ? "/{$_GET["Folder"]}" : null));
if(substr($Path, 0, strlen($RootPath)) !== $RootPath)$Path = $RootPath;

foreach(scandir($Path) as $Item)if($Item != "." && ($Path != $RootPath || $Item != "..")){
    $ItemWithPath = "{$Path}/{$Item}";

    if(is_dir($ItemWithPath)){
        $FolderHTML[] = "<div class=\"Item\"><a href=\"./{$Script}?Path={$Path}&Folder={$Item}\" class=\"Link\">{$Item}</a></div>";
    }
    else{
        //$FileHTML[] = "<div class=\"Item\"><a href=\"./{$Script}?Path={$Path}&Folder=.&{$Item}&File={$Item}\" class=\"Link\">{$Item}</a><span class=\"Size\">" . round(filesize($ItemWithPath) / 1024, 0) . " KB</span><span class=\"ModificationTime\">" . date("Y-m-d H:i:s", filemtime($ItemWithPath)) . " KB</span></div>";
        $FileHTML[] = "<tr class=\"Item\"><td><a href=\"./{$Script}?Path={$Path}&Folder=.&{$Item}&File={$Item}\" class=\"Link\">{$Item}</a></td><td class=\"Size\">" . round(filesize($ItemWithPath) / 1024, 0) . " KB</td><td class=\"ModificationTime\">" . date("Y-m-d H:i:s", filemtime($ItemWithPath)) . "</td></tr>";
    }
}
?><html>
    <head>
        <style>
            body{margin: 0; font-family: Verdana, Tahoma, Arial; font-size: 12px;}
            body:after{display: block; clear: both; content: '';}

            div{box-sizing: border-box;}

            .Navigation{float: left; width: 33%;}
            .Navigation > .CurrentPath{border: 1px Black solid; background: rgba(0, 255, 255, 0.25); padding: 5px;}
            .Navigation > .FolderList{height: calc(50% - 1em - 12px); border: 1px Grey solid; overflow-y: auto;}
            .Navigation > .FolderList > .Item{padding: 5px;}
            .Navigation > .FolderList > .Item:hover{background: rgba(255, 255, 0, 0.5);}
            .Navigation > .FolderList > .Item > .Link{text-decoration: none;}

            .Navigation > .FileList{height: 50%; border: 1px Grey solid; overflow-y: auto;}
            .Navigation > .FileList > table{font-size: inherit;}
            .Navigation > .FileList > table > tbody > .Item{}
            .Navigation > .FileList > table > tbody > .Item:hover{background: rgba(255, 255, 0, 0.5);}
            .Navigation > .FileList > table > tbody > .Item > td{padding: 5px;}
            .Navigation > .FileList > table > tbody > .Item > td > .Link{text-decoration: none;}
            .Navigation > .FileList > table > tbody > .Item > .Size{margin-left: 2em; white-space: nowrap;}
            .Navigation > .FileList > table > tbody > .Item > .ModificationTime{margin-left: 2em;}

            .FileContent{float: left; width: 67%;}
            .FileContent > .FileName{border: 1px Black solid; background: rgba(255, 0, 255, 0.25); padding: 5px;}
            .FileContent > .Content{height: calc(100% - 1em - 12px); background: Black; padding: 5px; color: White; white-space: pre;}
        </style>
    </head>
    <body>
        <div class="Navigation">
            <div class="CurrentPath"><?=$Path?></div>

            <div class="FolderList">
                <?=implode("\n  ", $FolderHTML) . "\n"?>
            </div>

            <div class="FileList">
                <table>
                    <tbody>
                        <?=implode("\n  ", $FileHTML) . "\n"?>
                    </tbody>                
                </table>
            </div>
        </div>

        <div class="FileContent">
            <div class="FileName"><?=isset($_GET["File"]) ? $_GET["File"] : null?></div>
            <div class="Content"><?=isset($_GET["File"]) ? file_get_contents("{$Path}/{$_GET["File"]}") : null?></div>
        </div>  
    </body>
</html>