现在上网超方便！有了文件系统API，咱们就能在网络上操控文件和目录，真是太神奇了！那咱们赶快聊聊这个API怎么用？比如如何创建、查看、编辑文件夹，还有权限管理这些都得搞清楚~
文件系统API简介
// 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)
文件系统API就好像是个助手，让我们的网站程序能够方便地读取沙盒里的文件。有了这个工具，设置、打开甚至查看用户电脑上的文件夹和文件都是小菜一碟，甚至还能往里塞内容！这样，用户使用起来更方便，我们开发者也能挖掘出更多有趣的新功能。
在Chrome网上商店找应用或者插件，你会看到一个叫unboundedStorage的玩意儿，这个东西就是让你可以尽情地使用存储空间！不过，用户下载安装后可能会弹出对话框问你是否愿意赋予它更大的存储权限，这其实是为了保障大家的个人信息安全哈~
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
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);
}
请求对沙盒文件系统的访问权限
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
想愉快上网？得有个“沙盒”文件系统。试试window.requestFileSystem()这个方法！可别忘了，临时存储的东西浏览器可是会悄悄删除的，弄好了记得备份数据
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); ...
记住！沙盒文件系统就像是给每个App一间小房子，它们在里面安安静静地工作，互相之间不会打扰。所以，用API的时候别乱跑来跑去，遵守规则是很重要滴~
创建和读取文件
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);
做到搞定沙盒文件系统的权限这事儿儿，首先得确定能用上getFile()这个神器哟。完成这个步骤，就能让文件系统告诉你一个叫FileSystem的家伙在哪，里面还藏着DirectoryEntry小助手，那个就是你需要找到的应用文件系统的家（fs.root）。有了这些东西，就能自由操作各种信件嘞！
那个ogg文件去哪儿了？用getFile()调试一下呗。记得把参数设置好！然后你要注意，没爹妈的孩子可没法生养，文件也一样，没家的创不了新的哟。别担心，虽然不生，原来的东西还在，我们只是借个路罢了！
function onInitFs(fs) {
fs.root.getFile('log.txt', {}, function(fileEntry) {
// Get a File object representing the file,
// then use FileReader to read its contents.
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
var txtArea = document.createElement('textarea');
txtArea.value = this.result;
document.body.appendChild(txtArea);
};
reader.readAsText(file);
}, errorHandler);
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
写入和复制文件
不但能瞧见文件里啥，还能用API写进去噢~首先搞个Blob，再用FileWriter帮手的write()功能，把你想塞进去的信息放文件里去。这样处理数据，程序写起来可就轻松多了！
function onInitFs(fs) {
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
console.log('Write completed.');
};
fileWriter.onerror = function(e) {
console.log('Write failed: ' + e.toString());
};
// Create a new Blob and write it to log.txt.
var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.
bb.append('Lorem Ipsum');
fileWriter.write(bb.getBlob('text/plain'));
}, errorHandler);
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
其实，你可以用网上那些牛逼的工具选几样文件，然后在沙盒里全搬进来。有个HTML5神器不用拖来拖去，轻轻松松就搞定了！利用FileEntry和DirectoryEntry的copyTo()方法，点两下就能复制现有的项目，目录结构都不用操心，它自己会搞定~
function onInitFs(fs) {
fs.root.getFile('log.txt', {create: false}, function(fileEntry) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function(fileWriter) {
fileWriter.seek(fileWriter.length); // Start write position at EOF.
// Create a new Blob and write it to log.txt.
var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.
bb.append('Hello World');
fileWriter.write(bb.getBlob('text/plain'));
}, errorHandler);
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
删除和移动目录
嫌弃目录或文件烦人？别怕，用递归把它们统统删掉就是！DirectoryEntry这个小助手有个removeRecursively()功能能帮上忙。要搬家或者换名？找moveTo()大哥帮忙，他会为你选好新家，起个新名儿！
document.querySelector('#myfile').onchange = function(e) {
var files = this.files;
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
// Duplicate each file the user selected to the app's fs.
for (var i = 0, file; file = files[i]; ++i) {
// Capture current iteration's file in local scope for the getFile() callback.
(function(f) {
fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.write(f); // Note: write() can take a File or Blob object.
}, errorHandler);
}, errorHandler);
})(file);
}
}, errorHandler);
};
说到异步调用出错这事儿，咱们就觉得把这些错儿都当回事儿处理比较省心。这样写出来的代码简单易懂，不容易出岔子！
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
fs.root.getFile('log.txt', {create: false}, function(fileEntry) {
fileEntry.remove(function() {
console.log('File removed.');
}, errorHandler);
}, errorHandler);
}, errorHandler);
咱们就直接上视频教程，手把手教你灵活运用filesystem API，轻松自如地管理文件。不管是拖啊拖还是复制粘贴，速度飞快，让你的网站功能强大又不费力。而且还有安全保障！
dirEntry.isDirectory === true // See the section on FileEntry for other inherited properties/methods. ... var dirReader = dirEntry.createReader(); dirEntry.getFile(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.getDirectory(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.removeRecursively(successCallback, opt_errorCallback); ...
评论0