jQuery File Tree is an AJAX file browser written in jQuery. It is fully configurable, easy to install and configure. Appearance is changed by simply editing the CSS. jQuery File Tree works in all browsers supported by jQuery. It is also fully tested in Internet Explorer 6/7, Firefox 2, Safari 3 and Opera 9.

To install the plug-in, you need to download the
distribution package and upload it to the server. Then you need to connect the jQuery.js, jqueryFileTree.js scripts and the jqueryFileTree.css style sheet. After that, you need to call the
fileTree () function indicating the container, which will
contain the tree of files, plugin parameters and the handler function:
')
$(document).ready( function() {
$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
alert(file);
});
});
Here,
#container_id is the id of the div, which will
contain the file tree, and root is the root directory for viewing. The handler function takes one parameter - the name of the selected file. In this example, the file name will simply be displayed in alert. By default, the AJAX request is sent to the jqueryFileTree.php script (included in the distribution), but you can specify another script by adding the
script option:
$(document).ready( function() {
$('#container_id').fileTree({
root: '/some/folder/',
script: 'jqueryFileTree.asp',
}, function(file) {
alert(file);
});
});
Demo