HTML5 本地文件操作之FileSystemAPI簡介

一、FileSystemAPI簡介

HTML5的文件操作Api中

1.FileAPI，用於基礎的客戶端本地文件讀取，目前大多數接口已經被主流瀏覽器支持，點擊查看更多參考

2.FileSystemAPI，網絡應用可以創建、讀取、導航用戶本地文件系統中的沙盒部分以及向其中寫入數據。

API如下：

文件操作：File/Blob,FileList,FileReader,FileWriter

目錄文件系統訪問：DirectoryReader，FileEntry/DirectoryEntry,FileSystem,LocalFileSystem

二、瀏覽器支持與存儲限制

1.當前測試時只有Google瀏覽器支持也就是webkit內核

Opera僅支持FileAPI  IE不支持   Safari不支持   Firefox僅支持FileAPI   Chrome/Chromium瀏覽器支持。

2.應用在進行文件操作時，必須先請求系統上存儲數據配額，尤其針對PERSISTENT持久存儲需要用戶點擊確認，如果用戶拒絕文件訪問失敗

不過，可使用--unlimited-quota-for-files標記運行Chrome瀏覽器進行測試。此外，如果您要開發的是用於Chrome網上應用店的應用或擴展程序，可使用unlimitedStorage清單文件權限，而無需請求配額。最后，用戶會收到授予、拒絕或為應用增加存儲的權限對話框。

如果您要通過 file://調試您的應用，可能需要--allow-file-access-from-files標記。不使用這些標記會導致SECURITY_ERR或QUOTA_EXCEEDED_ERRFileError。(此問題，當時測試沒起作用。)

3.FileSystem 規范還定義了計划用於WebWorkers的同步API(LocalFileSystemSync)接口。不過，測試Demo中不涉及該同步API。

三、請求文件系統

網絡應用可通過調用window.requestFileSystem()請求對沙盒文件系統的訪問權限：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);

參數說明：

1.type：文件存儲是否應該是持久的。可能的值包括window.TEMPORARY、window.PERSISTENT

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

通過TEMPORARY存儲的數據可由瀏覽器自行決定刪除（例如在需要更多空間的情況下）。要清除PERSISTENT存儲，必須獲得用戶或應用的明確授權，並且需要用戶向您的應用授予配額。請參閱請求配額。

2.size:引用需要用於存儲的大小（單位：字節）。

3.successCallback：文件系統請求成功時回調。參數為FileSystem對象

3.errorCallback:用於處理錯誤或過去文件系統請求被拒絕的可選回調。參數為FileError對象（測試時，還不是這個對象，只有返回異常的文本內容）。

如果您是首次調用requestFileSystem()，系統會為您的應用創建新的存儲。請注意，這是沙箱文件系統，也就是說，一個網絡應用無法訪問另一個應用的文件。這也意味着您無法在用戶硬盤上的任意文件夾（例如“我的圖片”、“我的文檔”等）中讀/寫文件。

用法示例1，請求臨時存儲

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
    //fs為FileSystem對象
}
function errorHandler(err) {
    console.info('創建文件失敗');
    console.info(err);
}

用法示例2，請求持久存儲：

求存儲配額要使用 PERSISTENT 存儲，您必須向用戶取得存儲持久數據的許可。由於瀏覽器可自行決定刪除臨時存儲的數據，因此這一限制不適用於 TEMPORARY 存儲。
為了將 PERSISTENT 存儲與 FileSystem API 配合使用，Chrome 瀏覽器使用基於 window.webkitStorageInfo 的新 API 以請求存儲

//如果使用持久存儲，需要使用requestQuota
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//當前請求存儲空間，如果不修改大小的話，只需要請求一次就可以了
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024 * 1024 * 5, function (gratedBytes) {
    console.log('請求成功的空間：' + gratedBytes);
    window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler);
}, errorHandler);

function initFs(fs) {
    //
}
function errorHandler(err) {
    console.error(err);
    //console.info(typeof FileError);//FileError 目前不可用或已經放棄
    console.info('創建文件是失敗');
}

用戶授予許可后，就不必再調用 requestQuota() 了。如果修改了請求配額大小，會再次彈出提示框，提示用戶授權。
后續調用為無操作指令。您還可以使用 API 查詢源的當前配額使用情況和分配情況：window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒環境中的文件通過 FileEntry 接口表示。
FileEntry 包含標准文件系統中會有的屬性類型（name、isFile...）和方法（remove、moveTo、copyTo...）

更多整理：

 

參考文章：

http://www.cnblogs.com/zhwl/p/3201975.html

http://blog.csdn.net/qq_27626333/article/details/51823120