Code Snippets Gallery
Display Styled Directory Contents
Read the current directory of files and displays a styled table of their name, file type, and file size. Icons for the different major file types (audio, doc, html, image, pdf, psd, and video).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Display Directory Contents</title>
<style>
*{
padding:0;
margin:0;
}
html,body {
color:#333;
font-family: "Lucida Console", Courier, monospace;
font-size:14px;
text-shadow:1px 1px 1px #cacaca;
-webkit-text-shadow:1px 1px 1px #cacaca;
-moz-text-shadow:1px 1px 1px #cacaca;
}
a{
padding: 2px 0 0 24px;
color:#FE4902;
text-decoration:none;
}
a:hover{
color:#000;
}
#container{
margin:0 auto;
width:700px;
margin-top:20px;
padding-top:10px;
border:1px solid #EEE;
border-radius:10px;
-moz-border-radius:10px;
}
.head{
background-color:#FE4902;
color:#FFF;
font-weight:bold;
padding:7px 0 5px 10px;
font-size:14px;
letter-spacing:1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.head:hover{background-color:#FE4902;}
.head span{font-size:9px; letter-spacing:0;}
td{
background-color:#F3F3F3;
padding:6px;
}
td:hover{background-color:#EFEFEF;}
h1{
font-size:18px;
font-weight:bold;
padding:0 0 10px 10px;
}
/*icons for file types (add more to suit your needs - icons by famfamfam.)*/
/*images*/
a[href$=".jpg"] {background: url(image.gif) no-repeat left 50%;}
a[href$=".gif"] {background: url(image.gif) no-repeat left 50%;}
a[href$=".png"] {background: url(image.gif) no-repeat left 0%;}
/*pdfs*/
a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;}
/*psds*/
a[href$=".psd"] {background: url(psd.gif) no-repeat left 50%;}
/*docs*/
a[href$=".doc"] {background: url(doc.gif) no-repeat left 50%;}
a[href$=".txt"] {background: url(doc.gif) no-repeat left 50%;}
/*videos*/
a[href$=".avi"] {background: url(video.gif) no-repeat left 50%;}
a[href$=".m4a"] {background: url(video.gif) no-repeat left 50%;}
a[href$=".mov"] {background: url(video.gif) no-repeat left 50%;}
a[href$=".mp4"] {background: url(video.gif) no-repeat left 50%;}
a[href$=".wmv"] {background: url(video.gif) no-repeat left 50%;}
/*audio*/
a[href$=".mp3"] {background: url(audio.gif) no-repeat left 50%;}
a[href$=".wma"] {background: url(audio.gif) no-repeat left 50%;}
a[href$=".aac"] {background: url(audio.gif) no-repeat left 50%;}
/*web pages*/
a[href$=".html"] {background: url(html.gif) no-repeat left 50%;}
a[href$=".php"] {background: url(html.gif) no-repeat left 50%;}
</style>
</head>
<body>
<div id="container">
<?php
// opens this directory
$myDirectory = opendir(".");
// gets each entry
while($entryName = readdir($myDirectory)) {
$dirArray[] = $entryName;
}
// finds extention of file
function findexts ($filename)
{
$filename = strtolower($filename) ;
$exts = split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n];
return $exts;
}
// closes directory
closedir($myDirectory);
// counts elements in array
$indexCount = count($dirArray);
// sorts files
sort($dirArray);
// print 'em
print("<h1>Directory Contents</h1>");
print("<table width='100%' cellspacing='10'>
<tr>
<td class='head'>Filename</td>
<td class='head'>Type</td>
<td class='head'>Size <span>(bytes)</span></td></tr>\n");
// loops through the array of files and print them all
for($index=0; $index < $indexCount; $index++) {
if (substr("$dirArray[$index]", 0, 1) != "."){ // don't list hidden files
print("<tr><td><a href='$dirArray[$index]'>$dirArray[$index]</a></td>");
print("<td>");
print(findexts($dirArray[$index]));
print("</td>");
print("<td>");
print(filesize($dirArray[$index]));
print("</td>");
print("</tr>\n");
}
}
print("</table>\n");
?>
</div>
</body>
</html>
Thanks to Andrew Champ.
Loading ...
You need to change line 136 to this to avoid a Parse error.
a href='$dirArray[$index]'After that this works perfect! Thanks for sharing!
//T
There were \” marks in there to make sure that wasn’t a problem but for whatever reason weren’t showing up in the displayed code. I just made them single ticks to avoid problems, thanks!
Very nice script, thanks for sharing!
nice script. I’m sure I can find something to use this for :)
Looks really cool – I’ll definitely be using this for something or other.
sweet. and so simple. thanks!
Nice. Thanks.
line 141:
print(number_format((filesize($dirArray[$index])), 0, ”, ‘,’));
Nice!
One thing though: where can I find the little icons on the left of the file/folder please?
Here are the icons I used, they’re great for everything!
http://www.famfamfam.com/lab/icons/
Thanks for this. This is a great bit of code and very easy to add even for a php newb like me.
I’m getting an error from this line:
print(filesize($dirArray[$index]));I think it’s line 141 in the original, but I am just using the php part as an include with my own CSS so it’s line 48 in mine. Here is the error:
Warning: filesize() [function.filesize]: stat failed for archives in /..(path to my website).org/includes/directory_contents.php on line 48I believe the error is because it is printing out the parent directory folder (and its parent, too), which have no filesize. It works great, except for those two lines – and I can’t figure out why they even are being printed, since they are not files IN the directory… My folder structure is
/newsletters/archives/index.phpand the first row of the table displaying the files shows “archives,” with the error under the filesize column, and the last row of the table shows “newsletters” and another filesize error.I’m just learning PHP, but I think a line to set the condition if there is no suffix, don’t include it might be fairly easy… for someone who is more fluent in PHP, anyway :)
Anyone have any ideas? Thanks!
I’m trying to figure it out, but realized that setting a condition for not printing a file without a “.” in the string won’t work, because the “files” that are causing the errors don’t actually exist – it’s showing the parent and “grandparent” directories as if they were files IN the directory – /newsletters/archives/archives and /newsletters/archives/newsletters
I can’t figure out what is causing that, and since they don’t actually exist in the directory, my idea for setting a condition of not printing a string without a “.” in it won’t have any effect. And it hasn’t.
Here’s the page:
http://bristleconecnps.org/newsletters/archives/index.php
I got it to stop displaying the empty line at the top and the first error – the archives one, by changing the loop to this:
for($index=4; $index < $indexCount; $index++) {starting at “1″ instead of 0 got rid of the blank, and starting at “4″ takes into consideration the two parent directories which aren’t being shown plus the weird error one, and starts on the first real file. There is still the error at the end (last row) of the table.
Okay, my head hurts, and I hope some of you wonderful PHP people and problem solvers have some better ideas!
Thanks.
I just fixed it:
for($index=4; $index < $indexCount-1; $index++) {(added -1 to the index count so it wouldn’t show the last “file”)
This is obviously a workaround that is specific to that file structure – if the directory was at a different level it would need to start at a different place, which makes using this code as an include for any directory index file I want on my site not as simple, but hey, it works!
Sorry for all the multiple comment posts, but I hope it may be helpful and/or interesting to someone! :)
And if someone has a better idea that will fix it instead of hiding it, I would love to hear it.
Thanks!!
This will prevent the last file from being listed in the directory. Do you have any idea on how to prevent the index.php from showing?
Very cool. Thank you very much Chris. I know I’m late in the game here but I’m definitely gonna use your script.
OK… I’ve played with this and it works great. Really excited about this but I don’t know enough to start adding stuff to the code. But what about adding a download function to the directory? Each of the items would get their own download button. Just an idea in case someone would like to try it. Thanks again for the script!
Hey this is great code works so sweet!
But I need to open up a different dir to where the script is located how do i do that?