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整理（二）