HTML5 本地文件操作之FileSystemAPI实例（三）

文件夹操作demo

1.读取根目录文件夹内容

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //显示根目录下的内容
    var dirReader = fs.root.createReader();
    var entries = [];
    var readEntries = function () {
        //DirectoryReader.readEntries() 方法一次读取内容的个数不一定
        //返回FileEntry数组
        dirReader.readEntries(function (results) {
            console.info(results);
            if (!results.length) {
                showEntries(entries.sort());
            } else {
                entries = entries.concat(toArray(results));
                readEntries();
            }
        }, errorHandler);
    }
    readEntries();
}
function errorHandler(err) {
    console.info(err);
}
function toArray(list) {
    return Array.prototype.slice.call(list || [], 0);
}
//显示读取结果
function showEntries(entries) {
    var fragment = document.createDocumentFragment();
    entries.forEach(function (entry, i) {
        var li = document.createElement('li');
        li.innerHTML = ['是否是目录：', entry.isDirectory, '----文件名：', entry.name].join('');
        fragment.appendChild(li);
    });
    document.querySelector('#filelist').appendChild(fragment);
}

2.读取子目录‘MyPictures’,'MyPicturres/subfolder'

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //创建目录
    fs.root.getDirectory('MyPictures', { create: true }, function (dirEntry) {
        console.log('创建目录成功：' + dirEntry.fullPath);
        console.info(dirEntry);
    }, errorHandler);
}
function errorHandler(err) {
    console.info(err);
}

3.创建子目录

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //创建子目录，在使用getDirectory()方法创建父目录不存在的目录，将引发异常
    //为了使用方便以递归的方式，添加各个子目录
    var path = 'musi/genres/jazz/';
    function createDir(rootDirEntry, folders) {
        if (folders[0] == '.' || folders[0] == '') {
            folders = folders.slice(1);
        }
        rootDirEntry.getDirectory(folders[0], { create: true }, function (dirEntry) {
            console.info(dirEntry.fullPath);
            if (folders.length) {
                createDir(dirEntry, folders.slice(1));
            }
        }, errorHandler)
    }
    createDir(fs.root, path.split('/'));
}
function errorHandler(err) {
    console.info(err);
}

 

更多：

HTML5 本地文件操作之FileSystemAPI实例（二）

HTML5 本地文件操作之FileSystemAPI实例（一）

HTML5 本地文件操作之FileSystemAPI整理（二）