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

• PHP File Tree classic
• PHP File Tree with jQuery — much nicer :)

Download

Download the current version

Usage

Generating a File Tree

A call to thephp_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$allowedas the$extensionsparameter will return a list of directories and only show image files of the respective types.

Feedback

Use$return_linkto 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 tohttp://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

Includephp_file_tree.jsinto theheadsection 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 usingphp_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 includephp_file_tree_jquery.js.

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

Depending on the version of jQuery you download and whether or not you get the compresses/uncompressed version, the name ofjquery.jswill vary. For example, jQuery 1.2 compressed will be calledjquery-1.2.pack.jswhile the uncompressed version will be calledjquery-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. Seedefault.cssto get started.