はじめに
Web アプリケーションでファイルやディレクトリの読み書きができたらとても便利だろうな、とよく思います。オフラインからオンラインに移行した後、アプリケーションはより複雑になり、ファイル システムの API の欠如がネットワークの進歩を妨げています。バイナリ データの保存または操作はデスクトップに限定されるべきではありません。幸いなことに、FileSystemAPIの出現により、この状況はついに変わりました。 FileSystemAPI を使用すると、Web アプリケーションはユーザーのローカル ファイル システムのサンドボックス化された部分の作成、読み取り、移動、および書き込みを行うことができます。
API は、次のようなさまざまなトピックに分かれています:
ファイルの読み取りと処理: File/Blob File/Blob、FileList、FileReader
创建和写入：BlobBuilder、FileWriter
目录和文件系统访问：DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem
浏览器支持与存储限制
在写这篇文章时，只有 GoogleChrome 浏览器可以实施此FileSystemAPI。目前尚不存在专门用于文件/配额管理的浏览器用户界面。要在用户的系统上存储数据，您的应用可能需要请求配额。不过，可使用--unlimited-quota-for-files标记运行Chrome浏览器进行测试。此外，如果您要开发的是用于Chrome网上应用店的应用或扩展程序，可使用unlimitedStorage清单文件权限，而无需请求配额。最后，用户会收到授予、拒绝或为应用增加存储的权限对话框。
如果您要通过 file://调试您的应用，可能需要--allow-file-access-from-files标记。不使用这些标记会导致SECURITY_ERR或QUOTA_EXCEEDED_ERR、FileList
、
FileReader
作成して書き込みます:
BlobBuilder、
FileWriter
ディレクトリおよびファイル システム アクセス:
DirectoryReader code>
、
FileEntry/DirectoryEntry
、
LocalFileSystem
ブラウザのサポートとストレージの制限
この記事の執筆時点では、
GoogleChrome
ブラウザのみがこの
FileSystemAPI
を実装できます。現在、ファイル
/
クォータ管理用の専用ブラウザ ユーザー インターフェイスはありません。ユーザーのシステムにデータを保存するには、アプリでクォータを要求する必要がある場合があります。ただし、テスト用に
--unlimited-quota-for-files
フラグを使用して 🎜Chrome🎜 ブラウザを実行できます。さらに、🎜Chrome🎜ウェブストア用のアプリまたは拡張機能を開発している場合は、クォータをリクエストせずに🎜
unlimitedStorage🎜マニフェストファイル権限を使用できます。最後に、ユーザーはアプリにストレージを付与、拒否、または追加するための権限ダイアログ ボックスを受け取ります。 🎜🎜 🎜
file://🎜 経由でアプリをデバッグしたい場合は、🎜
--allow-file-access-from が必要になる場合があります- ファイル🎜タグ。これらのフラグを使用しないと、🎜
SECURITY_ERR🎜 または 🎜
QUOTA_EXCEEDED_ERRFileError🎜 が発生します。 🎜🎜ファイル システムのリクエスト🎜🎜 Web アプリケーションは、window.requestFileSystem(): 🎜
// Note: The file system has been prefixed as of Google Chrome 12:
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(type, size, successCallback, opt_errorCallback)
ログイン後にコピー
🎜type🎜🎜 ファイル ストレージを永続化するかどうかを呼び出すことで、サンドボックス ファイル システムへのアクセスをリクエストできます。可能な値には、window.TEMPORARY および window.PERSISTENT が含まれます。 TEMPORARY 経由で保存されたデータは、ブラウザーの裁量で削除される場合があります (例: より多くのスペースが必要な場合)。 PERSISTENT ストレージをクリアするには、ユーザーまたはアプリからの明示的な承認が必要であり、ユーザーはアプリにクォータを付与する必要があります。 「割り当てのリクエスト」を参照してください。 🎜🎜サイズ🎜🎜アプリがストレージに必要とするバイト単位のサイズ。 🎜🎜successCallback🎜🎜 ファイル システム リクエストが成功したときに呼び出されるコールバック。そのパラメータは FileSystem オブジェクトです。 🎜🎜opt_errorCallback🎜🎜 エラーを処理するための、またはファイル システムの取得リクエストが拒否された場合のオプションのコールバック。そのパラメータは FileError オブジェクトです。 🎜🎜 requestFileSystem() を初めて呼び出すと、システムはアプリケーション用に新しいストレージを作成します。これはサンドボックス ファイル システムであるため、ある Web アプリが別のアプリのファイルにアクセスできないことに注意してください。これは、ユーザーのハード ドライブ上の任意のフォルダー (マイ ピクチャ、マイ ドキュメントなど) 内のファイルの読み取り/書き込みができないことも意味します。 🎜🎜使用例: 🎜
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);ログイン後にコピー
🎜FileSystem 仕様では、WebWorkers 向けに計画されている同期 API (LocalFileSystemSync) インターフェイスも定義されています。ただし、このチュートリアルでは同期 API については説明しません。 🎜🎜このドキュメントの残りの部分では、非同期呼び出しによって発生したエラーに対して同じハンドラーを使用します。
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
};
console.log('Error: ' + msg);
}ログイン後にコピー
解的讯息。请求存储配额要使用 PERSISTENT 存储，您必须向用户取得存储持久数据的许可。由于浏览器可自行决定删除临时存储的数据，因此这一限制不适用于 TEMPORARY 存储。为了将 PERSISTENT 存储与 FileSystem API 配合使用，Chrome 浏览器使用基于 window.webkitStorageInfo 的新 API 以请求存储：
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});ログイン後にコピー
用户授予许可后，就不必再调用 requestQuota() 了。后续调用为无操作指令。您还可以使用 API 查询源的当前配额使用情况和分配情况：window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒环境中的文件通过 FileEntry 接口表示。FileEntry 包含标准文件系统中会有的属性类型（name、isFile...）和方法（remove、moveTo、copyTo...）。FileEntry 的属性和方法：
fileEntry.isFile === true
fileEntry.isDirectory === false
fileEntry.name
fileEntry.fullPath
...
fileEntry.getMetadata(successCallback, opt_errorCallback);
fileEntry.remove(successCallback, opt_errorCallback);
fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
fileEntry.getParent(successCallback, opt_errorCallback);
fileEntry.toURL(opt_mimeType);
fileEntry.file(successCallback, opt_errorCallback);
fileEntry.createWriter(successCallback, opt_errorCallback);
...
ログイン後にコピー
为了更好地理解 FileEntry，本部分还提供了执行常规任务的众多技巧。创建文件您可以使用文件系统的 getFile()（DirectoryEntry 接口的一种方法）查找或创建文件。请求文件系统后，系统会向成功回调传递FileSystem 对象，其中包含指向该应用相应文件系统的根的 DirectoryEntry (fs.root)。以下代码会在该应用相应文件系统的根中创建名为“log.txt”的空白文件：
function onInitFs(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
// fileEntry.isFile === true
// fileEntry.name == 'log.txt'
// fileEntry.fullPath == '/log.txt'
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);ログイン後にコピー
请求文件系统后，系统会向成功处理程序传递 FileSystem 对象。我们可以将回调中的 fs.root.getFile() 命名为要创建的文件的文件名。您可以传递绝对路径或相对路径，但该路径必须有效。例如，如果您尝试创建一个其直接父级文件不存在的文件，将会导致出错。getFile() 的第二个参数是在文件不存在时从字面上说明函数行为的对象。在此示例中，create: true 会在文件不存在时创建文件，并在文件存在时 (exclusive: true) 引发错误。如果 create: false，系统只会获取并返回文件。无论是哪种情况，系统都不会覆盖文件内容，因为我们只是获取相关文件的引用路径。通过名称读取文件以下代码会检索名为“log.txt”的文件，并使用 FileReader API 读取文件内容，然后将其附加到页面上新的
