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

文件操作實例整理一

1.請求系統配額類型

console.info(window.TEMPORARY);  //0  臨時
console.info(window.PERSISTENT); //1  持久

2.持久存儲下，創建文件、創建子目錄下的文件

//如果使用持久存儲，需要使用requestQuota
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//當前請求存儲空間，如果不修改大小的話，只需要請求一次就可以了
console.info(window.webkitStorageInfo);
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024 * 1024 * 5, function (gratedBytes) {
    console.log('請求成功的空間：' + gratedBytes);
    window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler);
}, errorHandler);
function initFs(fs) {
    //創建文件，只能創建當前目錄下的文件
    //如果不指定create=true，文件不存在拋出異常，‘DOMException: A requested file or directory could not be found at the time an operation was processed.’
    //如果不指定exclusive，create=true的話,不存在創建，存在重新覆蓋
    //在文件件目錄操作中create=true如果文件目錄存在的話不清空
    fs.root.getFile('test1.txt', {
        create: true,  //true:創建新文件，如果文件存在拋出異常執行errorHandle，不影響程序執行
        exclusive: true //是否高級文件驗證
    }, function (fileEntry) {
        console.info(fileEntry);
        console.log('文件創建成功，' + fileEntry.name);
    }, errorHandler);

    //創建目錄下的文件(不能直接指定路徑創建文件)
    fs.root.getDirectory('MyPictures', { create: true }, function (dirEntry) {
        dirEntry.getFile('log3.txt', { create: true }, function (fileEntry) {
            console.log('目錄下文件創建成功：' + fileEntry.fullPath);
        }, errorHandler);
        dirEntry.getFile('test1.txt', { create: true }, function (fileEntry) {
            console.log('目錄下文件創建成功：' + fileEntry.fullPath);
        }, errorHandler);
    }, errorHandler)
}
function errorHandler(err) {
    console.error(err);
    //console.info(typeof FileError);//FileError 目前不可用或已經放棄
    console.info('創建文件是失敗');
}

3.寫入文件、讀取文件

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //創建文件，如果不指定exclusive，create=true的話不再創建，存在重新覆蓋
    fs.root.getFile('test3.txt', { create: true }, function (fileEntity) {
        //向文件中寫入內容
        if (fileEntity.isFile) {
            fileEntity.createWriter(function (fileWriter) {
                //寫入的內容可以可是File 或者Blob
                var blob = new Blob(['hello 中國'], {
                    type: 'text/plain'
                });
                fileWriter.write(blob);
                //顯示文件內容
                showFile(fileEntity);
            }, errorHandler);
        }
        console.info('當前文件名，' + fileEntity.name);
    }, errorHandler);
}
function errorHandler(err) {
    console.info('創建文件失敗');
    console.info(err);
}
//顯示指定fileEntity中的內容
function showFile(fileEntity) {
    fileEntity.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var txt1 = document.getElementById('txt1');
            txt1.innerHTML = '寫入文件成功：' + reader.result;
        }
        reader.readAsText(file);
    });
}

4.判斷文件是否存在

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //判斷文件是否存在
    fs.root.getFile('test3.txt', {}, function (fileEntry) {
        if (fileEntry.isFile) {
            //顯示文件內容
            showFile(fileEntry);
        }
    }, errorHandler);
}
function errorHandler(err) {
    console.info('創建文件失敗');
    console.info(err);
}
//顯示指定fileEntity中的文件內容、文件信息
function showFile(fileEntry) {
    fileEntry.file(function (file) {
        console.info(file);
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var txt1 = document.getElementById('txt1');
            txt1.innerHTML = '文件名：' + fileEntry.name + '\r\n文件內容：' + reader.result;
            //文件大小
            txt1.innerHTML += '\r\n字節大小：' + file.size;
        }
        reader.readAsText(file);
    });
}

5.寫入文件，並監聽事件

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //特別說明：BlobBuilder 以被拋棄，不建議使用
    //寫入文件
    fs.root.getFile('test4.txt', { create: true }, function (fileEntry) {
        if (fileEntry.isFile) {
            //使用fileWriter寫入內容，並監聽事件
            fileEntry.createWriter(function (fileWriter) {
                console.info(fileWriter);
                fileWriter.onwriteend = function (e) {
                    console.log('讀取寫入文件結束');
                }
                fileWriter.onerror = function (e) {
                    console.log('寫入異常：' + e.toString());
                }
                var blob = new Blob(['<h1>測試內容</h1>'], {
                    type: 'text/plain'
                });
                fileWriter.write(blob);
                //顯示文件
                showFile(fileEntry);
            }, errorHandler);
        }
    }, errorHandler);
}
function errorHandler(err) {
    console.info('創建文件失敗');
    console.info(err);
}
//顯示指定fileEntity中的文件內容、文件信息
function showFile(fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var txt1 = document.getElementById('txt1');
            txt1.innerHTML = '文件名：' + fileEntry.name + '\r\n文件內容：' + reader.result;
            //文件大小
            txt1.innerHTML += '\r\n字節大小：' + file.size;
        }
        reader.readAsText(file);
    });
}

 

更多：

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

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

HTML5 本地文件操作之FileSystemAPI簡介