- Produces valid, semantic XHTML
- 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
- Internet Explorer 6 & 7
- Firefox 2
- Safari 3
- Opera 9
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:
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");
$allowed as the
$extensions parameter will return a list of directories and only show image files of the respective types.
$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,
would send the user to
Making the List Expand/Collapse Dynamically
php_file_tree.js into the
head section of the appropriate page(s) as shown below:
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
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
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.