PHP File Tree

June 16, 2007

Overview

PHP File Tree is a PHP function that generates a valid, XHTML nested list of the specified directory. The script includes a JavaScript extension that makes the entire list expand and collapse dynamically.

Features

  • Produces valid, semantic XHTML
  • Degrades gracefully in browsers that don’t support JavaScript (entire list will still be displayed)
  • Fully customizable with CSS
  • Ability to style file icons based on the extension
  • Easy to implement…one PHP include and a function call produces the entire list
  • JavaScript extension for dynamic effects is included with only one line of code

Compatibility

The PHP File Tree JavaScript extension is known to work in the following browsers, but expected to work in most others that support JavaScript, too:

  • Internet Explorer 6 & 7
  • Firefox 2
  • Safari 3
  • Opera 9

Demo

Download

Download the current version

Usage

Generating a File Tree

A call to the php_file_tree() function will return a string containing the XHTML code of the specified directory. To output it directly to the page, precede the function call with an echo statement:

echo php_file_tree(...);

Filter by Extension

You can limit the types of files that will be displayed by specifying an array containing a list of file extensions to allow:

$allowed = array("gif", "jpg", "jpeg", "png");

Passing $allowed as the $extensions parameter will return a list of directories and only show image files of the respective types.

Feedback

Use $return_link to specify the action you want done when the user clicks on a file name. Use [link] as the placeholder for the filename. For example,

php_file_tree("your_dir/", "http://example.com/?url=[link]");

would send the user to http://example.com/?url=filename.ext. This is highly extendable, considering you could even use javascript to handle the clicks:

php_file_tree("your_dir/", "javascript:alert('You clicked on [link]');");

Making the List Expand/Collapse Dynamically

Classic Method

Include php_file_tree.js into the head section of the appropriate page(s) as shown below:

<script src="php_file_tree.js" type="text/javascript"></script>

All file trees generated by PHP File Tree will automatically collapse to the top level (as specified by $directory) and become dynamic. You can have more than one file tree functioning on one page — simply create another using php_file_tree().

jQuery Method

If you happen to be using the jQuery libary, you can add the same functionality as shown above with a lot less code. You’ll also get the famous jQuery animations for showing and hiding tree branches, which improves usability and looks a lot nicer.

To use jQuery with PHP File Tree, make sure you are already including the jQuery library (if you don’t have it, you can get it on the jQuery download page) and then include php_file_tree_jquery.js.

<script src="jquery.js" type="text/javascript"></script>
<script src="php_file_tree_jquery.js" type="text/javascript"></script>

Note: Depending on the version of jQuery you download and whether or not you get the compresses/uncompressed version, the name of jquery.js will vary. For example, jQuery 1.2 compressed will be called jquery-1.2.pack.js while the uncompressed version will be called jquery-1.2.js. Also, if you are already including the library you do not need to include it again.

Customizing the Appearance of the File Tree

The list can be customized completely using CSS and includes a default theme to aid in customization. Specific file types can be styled based on extension, making the file tree appear more like a standard file browser on your operating system. See default.css to get started.

Discussion

This discussion is now closed. If you want to leave feedback, you’re welcome to do so on Twitter.

  1. Thanks a bunch for this, works flawless!

    January 22nd, 2013Limpan
  2. I started to work on this functionality an hour ago and suddenly decided to check with google. I’m glad I stopped. Nice, clean and really easy to modify to fit my needs. Great job!

    March 9th, 2013Andrei
  3. Really useful. Thank you so much.

    October 19th, 2013John