Einführung
Ich denke oft, dass es sehr praktisch wäre, wenn Webanwendungen Dateien und Verzeichnisse lesen und schreiben könnten. Nach der Umstellung von offline auf online sind Anwendungen komplexer geworden und das Fehlen einer API im Dateisystem behindert den Fortschritt des Netzwerks. Das Speichern oder Interagieren mit Binärdaten sollte nicht auf den Desktop beschränkt sein. Glücklicherweise hat sich diese Situation durch das Aufkommen von FileSystemAPI endlich geändert. Mit der FileSystemAPI können Webanwendungen Sandbox-Teile des lokalen Dateisystems des Benutzers erstellen, lesen, navigieren und in diese schreiben.
API ist in verschiedene Themen unterteilt:
Dateien lesen und verarbeiten: File/Blob, FileList, FileReader
Erstellen und schreiben: BlobBuilder, FileWriter
Verzeichnis- und Dateisystemzugriff: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
Browser-Unterstützung und Speicherbeschränkungen
Zum Zeitpunkt des Schreibens dieses Artikels gibt es nur GoogleChrome Browser This FileSystemAPI kann implementiert werden. Derzeit gibt es keine dedizierte Browser-Benutzeroberfläche für die Datei-/-Kontingentverwaltung. Um Daten auf dem System des Benutzers zu speichern, muss Ihre App möglicherweise Kontingente anfordern. Sie können jedoch das Tag --unlimited-quota-for-files verwenden, um den Browser Chrome zum Testen auszuführen. Wenn Sie außerdem eine App oder Erweiterung für den Chrome Web Store entwickeln, können Sie die Manifestdateiberechtigungen unlimitedStorage verwenden, ohne Kontingente anzufordern. Abschließend erhält der Benutzer ein Berechtigungsdialogfeld, in dem er der App Speicher gewähren, verweigern oder hinzufügen kann.
Wenn Sie Ihre App über file:// debuggen möchten, benötigen Sie möglicherweise das Tag --allow-file-access-from-files. Die Nichtverwendung dieser Tags führt zu SECURITY_ERR oder QUOTA_EXCEEDED_ERRFileError.
Dateisystem anfordern
Eine Webanwendung kann Zugriff auf das Sandbox-Dateisystem anfordern, indem sie window.requestFileSystem() aufruft:
// 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)
Nach dem Login kopieren
type
Ob die Dateispeicherung persistent sein soll. Mögliche Werte sind window.TEMPORARY und window.PERSISTENT. Über TEMPORARY gespeicherte Daten können nach Ermessen des Browsers gelöscht werden (z. B. wenn mehr Speicherplatz benötigt wird). Das Löschen des PERSISTENT-Speichers erfordert eine ausdrückliche Autorisierung durch den Benutzer oder die App und erfordert, dass der Benutzer Ihrer App ein Kontingent gewährt. Siehe Kontingente anfordern.
Größe
Die Größe in Bytes, die die App zum Speichern benötigt.
successCallback
Callback wird aufgerufen, wenn die Dateisystemanforderung erfolgreich ist. Sein Parameter ist ein FileSystem-Objekt.
opt_errorCallback
Ein optionaler Rückruf, der zur Behandlung von Fehlern verwendet wird oder wenn die Anforderung zum Abrufen des Dateisystems abgelehnt wird. Sein Parameter ist ein FileError-Objekt.
Wenn Sie requestFileSystem() zum ersten Mal aufrufen, erstellt das System neuen Speicher für Ihre Anwendung. Beachten Sie, dass es sich um ein Sandbox-Dateisystem handelt, was bedeutet, dass eine Web-App nicht auf die Dateien einer anderen App zugreifen kann. Dies bedeutet auch, dass Sie keine Dateien in beliebigen Ordnern auf der Festplatte des Benutzers lesen/schreiben können (z. B. „Meine Bilder“, „Meine Dateien“ usw.).
Verwendungsbeispiel:
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);Nach dem Login kopieren
Die FileSystem-Spezifikation definiert auch die für WebWorker geplante Synchronisierungs-API-Schnittstelle (LocalFileSystemSync). Dieses Tutorial behandelt jedoch nicht die Synchronisierungs-API.
Im Rest dieses Dokuments verwenden wir denselben Handler für Fehler, die durch asynchrone Aufrufe ausgelöst werden:
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);
}Nach dem Login kopieren
解的讯息。请求存储配额要使用 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);
});Nach dem Login kopieren
用户授予许可后，就不必再调用 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);
...
Nach dem Login kopieren
为了更好地理解 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);Nach dem Login kopieren
请求文件系统后，系统会向成功处理程序传递 FileSystem 对象。我们可以将回调中的 fs.root.getFile() 命名为要创建的文件的文件名。您可以传递绝对路径或相对路径，但该路径必须有效。例如，如果您尝试创建一个其直接父级文件不存在的文件，将会导致出错。getFile() 的第二个参数是在文件不存在时从字面上说明函数行为的对象。在此示例中，create: true 会在文件不存在时创建文件，并在文件存在时 (exclusive: true) 引发错误。如果 create: false，系统只会获取并返回文件。无论是哪种情况，系统都不会覆盖文件内容，因为我们只是获取相关文件的引用路径。通过名称读取文件以下代码会检索名为“log.txt”的文件，并使用 FileReader API 读取文件内容，然后将其附加到页面上新的
