Introduction
Je pense souvent qu'il serait très pratique si les applications Web pouvaient lire et écrire des fichiers et des répertoires. Après être passées du mode hors ligne au mode en ligne, les applications sont devenues plus complexes et le manque d'API dans le système de fichiers a entravé la progression du réseau. Le stockage ou l'interaction avec des données binaires ne doivent pas être limités au bureau. Heureusement, cette situation a finalement changé grâce à l'émergence de FileSystemAPI. Avec FileSystemAPI, les applications Web peuvent créer, lire, naviguer et écrire dans des parties en bac à sable du système de fichiers local de l'utilisateur.
API est divisée en différentes rubriques :
Lecture et traitement des fichiers : File/Blob, FileList, FileReader
Créer et écrire : BlobBuilder, FileWriter
Accès aux répertoires et au système de fichiers : DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
Prise en charge du navigateur et limitations de stockage
Au moment de la rédaction de cet article, il n'existe que le navigateur GoogleChrome Ce FileSystemAPI peut être implémenté. Il n'existe actuellement aucune interface utilisateur de navigateur dédiée à la gestion des quotas de fichiers /. Pour stocker des données sur le système de l'utilisateur, votre application devra peut-être demander des quotas. Cependant, vous pouvez utiliser la balise --unlimited-quota-for-files pour exécuter le navigateur Chrome à des fins de test. De plus, si vous développez une application ou une extension pour le Chrome Web Store, vous pouvez utiliser les autorisations du fichier manifeste unlimitedStorage sans demander de quotas. Enfin, l'utilisateur reçoit une boîte de dialogue d'autorisation pour accorder, refuser ou ajouter du stockage à l'application.
Si vous souhaitez déboguer votre application via file://, vous aurez peut-être besoin de la balise --allow-file-access-from-files. La non-utilisation de ces balises entraîne SECURITY_ERR ou QUOTA_EXCEEDED_ERRFileError.
Demander le système de fichiers
Une application Web peut demander l'accès au système de fichiers sandbox en appelant 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)
Copier après la connexion
type
Indique si le stockage des fichiers doit être persistant. Les valeurs possibles incluent window.TEMPORARY et window.PERSISTENT. Les données stockées via TEMPORARY peuvent être supprimées à la discrétion du navigateur (par exemple si plus d'espace est requis). La suppression du stockage PERSISTANT nécessite une autorisation explicite de l’utilisateur ou de l’application, et nécessite que l’utilisateur accorde un quota à votre application. Voir Demander des quotas.
taille
La taille en octets dont l'application a besoin pour le stockage.
successCallback
Callback appelé lorsque la requête du système de fichiers réussit. Son paramètre est un objet FileSystem.
opt_errorCallback
Un rappel facultatif utilisé pour gérer les erreurs ou lorsque la demande d'obtention du système de fichiers est rejetée. Son paramètre est un objet FileError.
Si vous appelez requestFileSystem() pour la première fois, le système créera un nouveau stockage pour votre application. Notez qu'il s'agit d'un système de fichiers sandbox, ce qui signifie qu'une application Web ne peut pas accéder aux fichiers d'une autre application. Cela signifie également que vous ne pouvez pas lire/écrire des fichiers dans des dossiers arbitraires sur le disque dur de l'utilisateur (par exemple Mes images, Mes documents, etc.).
Exemple d'utilisation :
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);Copier après la connexion
La spécification FileSystem définit également l'interface API de synchronisation (LocalFileSystemSync) prévue pour les WebWorkers. Cependant, ce tutoriel ne couvre pas l'API de synchronisation.
Dans la suite de ce document nous utiliserons le même gestionnaire pour les erreurs générées par les appels asynchrones :
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);
}Copier après la connexion
解的讯息。请求存储配额要使用 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);
});Copier après la connexion
用户授予许可后，就不必再调用 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);
...
Copier après la connexion
为了更好地理解 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);Copier après la connexion
请求文件系统后，系统会向成功处理程序传递 FileSystem 对象。我们可以将回调中的 fs.root.getFile() 命名为要创建的文件的文件名。您可以传递绝对路径或相对路径，但该路径必须有效。例如，如果您尝试创建一个其直接父级文件不存在的文件，将会导致出错。getFile() 的第二个参数是在文件不存在时从字面上说明函数行为的对象。在此示例中，create: true 会在文件不存在时创建文件，并在文件存在时 (exclusive: true) 引发错误。如果 create: false，系统只会获取并返回文件。无论是哪种情况，系统都不会覆盖文件内容，因为我们只是获取相关文件的引用路径。通过名称读取文件以下代码会检索名为“log.txt”的文件，并使用 FileReader API 读取文件内容，然后将其附加到页面上新的
