You may want to display the content of a directory sooner or later, maybe to simplify a script that displays files (image viewer,…) or to be able to access your files without FTP.
Of course there are many premade scripts and tutorials, but all I really wanted was a script that returns the files in a directory, sorted alphabetically and displaying directories at the top, plus it has to be usable on Android mobile phones.
Here is how I made my script, folders open upon click and files open in a new tab/window. Also you can display icons next to a file to help the user determine the file type.
If you do not care about learning or details but just want the script, scroll down to the bottom to find the full PHP + CSS file source code.
The first question I asked myself was how the script knows what folder the user is currently in. This information can be transmitted using the GET parameter of PHP.
$o = $_GET["o"];
If we are not currently in a certain folder it will be set to the directory this script file is in:
{$o= ".";}
In the process we want to separate folders from files and sort them alphabetically, for that we will need two arrays:
$dirarray = array(); $filarray = array();
Next we check if the folder/file omitted by the GET data exists, if it is a folder and if it is readable:
if (file_exists($o) && is_dir($o) && $handle = opendir ($o))
Should that be the case we will output the directory content:
echo "Directory Content:<br>";
..but we still have to sort it first:
while ( false !== ($d = readdir ($handle)))
{
if ($d != "." && $d != "..")
{ $of = "$o"."/"."$d";
if ( is_dir($of))
{
array_push($dirarray, $d);
}
else
{
array_push($filarray, $d);
}
}
}
closedir($handle);
sort ($dirarray);
sort ($filarray);
These lines of code sort out the cases “.” and “..” which would be displayed otherwise.
Then the script adds the current folder ($o) and the files that are being read ($d) (e.g. folder “./images” and file “x.jpg” become “./images/x.jpg”) and checks if this is a directory or a file, then adds it to the array it belongs to.
Afterwards the script closes the folder and sorts the arrays alphabetically.
Now we are almost done, all that is left to do is to display something to the user.
You can make this as complicated as you want, it does involve knowledge of CSS so I tried to keep it simple:
foreach($dirarray as $filename)
{ $of = "$o"."/"."$filename";
echo"<div class='linklist'><div class='ft'><img src='i/dir.png' alt='dir'></div><div class='ct'><h2><a href='?o=$of'>$filename</a></h2></div></div>";
}
foreach($filarray as $filename)
{ $of = "$o"."/"."$filename";
$x = filetypeicon ($of);
$ext = filetypealt ($of);
echo "<div class='linklist'><div class='ft'><img src='$x' alt='$ext'></div><div class='ct'><h2><a href='$o/$filename' target='_blank'>$filename</a></h2></div></div>";
}
echo "<p class='clearfix'>";
Phew now that’s a batch of code, here is the explanation:
At the top we display the folders with a clickable link. For that to work we need to add the foldername to the folder we currently are in ($of). Then we output the links in a div that contains two more div’s, one is used to display an icon (ft), the other one is used to display the link (ct).
Because the “id” of a div is not meant to be repeated we use classes to define their attributes in the .css file.
The “clearfix” class p in the end is needed, because the div’s ft and cd float to the left and right (declarerd in the .css file).
Then we output the files. At first we add the file name to the folder to get a link again, then we call two functions. All they do is determine the icon, you can leave that part out of course and just display one standard icon.
The content of the functions is:
<?php
function filetypeicon ($of) {
$path_parts = pathinfo($of);
$ico1 = $path_parts['extension'];
$ico = "i/$ico1.png";
if (file_exists ($ico)){
return ($ico);
}
else {
return ("i/blank.png");
}
}
function filetypealt ($of) {
$path_parts = pathinfo ($of);
$ext = $path_parts['extension'];
return ($ext);
}
?>
This means you can put images in the folder “i” named *extension*.png, e.g. jpg.png, php.png,… which will automatically be chosen for the file type. Should there not be an image available for a certain file type the image “blank.png” will be used.
Now we are done! (:
Here is the full content of the the .php file and the .css file, w3 validated:
<?php
function filetypeicon ($of) {
$path_parts = pathinfo($of);
$ico1 = $path_parts['extension'];
$ico = "i/$ico1.png";
if (file_exists ($ico)){
return ($ico);
}
else {
return ("i/blank.png");
}
}
function filetypealt ($of) {
$path_parts = pathinfo ($of);
$ext = $path_parts['extension'];
return ($ext);
}
?>
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noarchive">
<meta name="revisit-after" content="1">
<meta name="author" content="tech.tiq.cc">
<meta name="description" content="tech.tiq.cc PHP file browser">
<meta name="keywords" content="tech.tiq.cc PHP file browser">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<meta name="viewport" content="width=400"/>
<title>tech.tiq.cc PHP file browser</title>
</head>
<body>
<div id="content">
<?php
$o = $_GET["o"];
if ( $o == "")
{$o= ".";}
$dirarray = array();
$filarray = array();
if (file_exists($o) && is_dir($o) && $handle = opendir ($o))
{
echo "Directory Content:<br>";
while ( false !== ($d = readdir ($handle)))
{
if ($d != "." && $d != "..")
{ $of = "$o"."/"."$d";
if ( is_dir($of))
{
array_push($dirarray, $d);
}
else
{
array_push($filarray, $d);
}
}
}
closedir($handle);
sort ($dirarray);
sort ($filarray);
}
foreach($dirarray as $filename)
{ $of = "$o"."/"."$filename";
echo"<div class='linklist'><div class='ft'><img src='i/dir.png' alt='dir'></div><div class='ct'><h2><a href='?o=$of'>$filename</a></h2></div></div>";
}
foreach($filarray as $filename)
{ $of = "$o"."/"."$filename";
$x = filetypeicon ($of);
$ext = filetypealt ($of);
echo "<div class='linklist'><div class='ft'><img src='$x' alt='$ext'></div><div class='ct'><h2><a href='$o/$filename' target='_blank'>$filename</a></h2></div></div>";
}
echo "<p class='clearfix'>";
?>
</div>
</body>
</html>
*{margin:0;padding:0}
img {border: 0;}
#content {margin:0 auto; width:400px; border-style:solid; border-width:5px; text-align:center;}
#content a:link , a:visited {color:#5C5C5C; text-decoration:none; text-underline:none; font-family:"Courier New", Courier, mono; display:block;} /*file browser by http://tech.tiq.cc*/
.ft {margin-left:0; margin-right:auto; width: 32px; float:left; height: 32px;}
.ct {margin-right:0; margin-left: auto; width: 365px; float:right; height: 31px; text-align:left;}
.linklist {width:400px; height:32px; background:#3D8BFF;border-bottom: 1px solid #999999;}
.linklist:hover {background:#7A95FF;}
.clearfix {clear: both;}
Just upload your index.php along with the style.css to the webspace and start browsing, you will have to find icons on your own, they should be 32×32 px. The page can also be used with mobile devices perfectly fine.