HTML / Javascript：获取给定目录中所有文件和子目录的列表

Question

I am working on an interface that allows the to access the file system on the client side. The user should be able to browse through the file system, select a directory and my system will display list of files and sub-directories of the selected directory.

I have tried using HTML5 File API, but that apparently only allows users to select files (not folders).

Any pointers/help in this direction will be appreciated.

Answer 1

This cannot be done in JavaScript as it would be a potential security issue. Only files selected by the user via a file dialog can be accessed using JavaScript.

Here's a pretty nice article on the File API if you haven't come across it yet.

Answer 2

If it's still an open issue, then let me give you a solution that might work for you.

HTML

File input for selecting a directory:

<input type="file" id="file-input" webkitdirectory="" directory=""/>

JavaScript

The following script collects all files from the given folder and from ALL sub folders. Even from sub-subfolders, etc.

$("#file-input").on("change", function(e) {
    var thefiles = e.target.files;
    $.each(thefiles, function(i, item) {
        var thefile = item;
        var reader = new FileReader();
        reader.onload = function() {
            files.push(thefile);
        };
        reader.readAsArrayBuffer(thefile);
    });

});