Displaying a directory's files using PHP

21 April 2009

I was approached by a client recently who wanted a lot of files placed on their website for users to either view or download.

When I looked into this further there was over 70MB worth of files and so I uploaded them all to a directory within their own category directory.

Now that they were uploaded I didn't want to mess around trying to add them to a database and display them this way so instead I used the opendir() and readdir() functions in php.

The opendir() function first opens a directory, and then the readdir() function can be used in a while loop to display them.

When displaying the files they will seem to be in quite a random order and the list will also include ".", "..", and sub directory names.

Firstly I wanted to strip out the "." and ".." file names as these were just a way of navigating up one level, and then I wanted to display the sub directories as links which would show/hide the directories contents.

The code I came up with for this is:

<?php
$base_dir = "documents";
$handle = opendir($base_dir);
$file_counter = 0;

while (($file = readdir($handle))!==false)
{
    if ($file == "." || $file == "..")
    {
    }
    else
    {
        if (strstr($file,".") === false)
        {
            $file_counter = $file_counter + 1;
            $handle2 = opendir($base_dir . "/" . $file);
            echo "<div style="margin-left:20px;">
            <h2><a href="#" onclick="show_hide('area_" . $file_counter . "'); return false;">" . $file . "</a></h2><div id="area_" . $file_counter . "" class="insurances_tree">";
            while (($file2 = readdir($handle2))!==false)
            {
                if ($file2 == "." || $file2 == "..")
                {
                }
                else
                {
                    if (strstr($file2,".") === false)
                    {
                        $file_counter = $file_counter + 1;
                        $handle3 = opendir($base_dir . "/" . $file . "/" . $file2);
                        echo "<h3><a href="#" onclick="show_hide('area_" . $file_counter . "'); return false;">" . $file2 . "</a></h3><div id="area_" . $file_counter . "" class="insurances_tree">";
                       
                        while (($file3 = readdir($handle3))!==false)
                        {
                            if ($file3 == "." || $file3 == "..")
                            {
                            }
                            else
                            {
                                if (strstr($file3,".") === false)
                                {
                                    echo "<strong>" . $file3 . "</strong>";
                                }
                                else
                                {
                                    echo "<a href="/" . $base_dir . "/" . $file . "/" . $file2 . "/" . $file3 . "" target="_blank">" . $file3 . "</a><br />";
                                }
                            }
                        }
                        echo "</div>";
                        closedir($handle3);
                    }
                    else
                    {
                        echo "<a href="/" . $base_dir . "/" . $file . "/" . $file2 . "" target="_blank">" . $file2 . "</a><br />";
                    }
                }
            }
            echo "</div>";
            closedir($handle2);
        }
        else
        {
            echo "<a href="/" . $base_dir . "/" . $file . "" target="_blank">" . $file . "</a><br />";
        }
        echo "</div>";
    }
}
closedir($handle);
?>

The only addition to this code that you will need is to hide the div's containing the sub directory files and also add a javascript function called show_hide which will look something like this:

function show_hide(id)
{
    if (document.getElementById)
    {
        obj = document.getElementById(id);
        if (obj.style.display == "block")
        {
            obj.style.display = "none";
        }
        else
        {
            obj.style.display = "block";
        }
    }
}

http://www.peternichol.com/entry/trackback/89/

Please leave a comment using the form provided.