欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

基于HTML5 FileSystem API的行使先容

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

HTML5的强盛之一就是应承web措施申请一些姑且可能永世的空间(Quota)在这里可以举办 数据的存储乃至文件的操纵。

FileSystem提供了文件夹和文件的建设、移动、删除等操纵,大大利便了数据的当地处理赏罚, 并且全部的数据都是在沙盒(sandboxed)中,差异的web措施不能相互会见,这就担保了数据 的完备和安详。

在CatWrite项目中,运用了HTML5的这个特征举办数据的存储,极端利便,只是今朝来说只有 Chrome赏识器对FileSystem API支持的较量好,以是只能运行在Chrome赏识器中。

在完成这个成果的时辰,查阅了许多资料,有一些资料是一年前的,可是跟着赏识器版本的 变革,一些代码已经老化,在这里逐一总结和清算。这里只罗列了项目顶用到的API,算是 对完乐成能的一次梳理。

申请空间
为了举办数据的存储,必必要向赏识器举办申请,假如是永世存储还会向用户举办扣问,只有 赞成后才会继承执行。

起首必必要声明想要的权限。


代码如下:
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; //文件体系哀求标识
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; //按照URL取得文件的读取权限

获得体系的权限后就可以向赏识器申请空间


代码如下:
window.requestFileSystem(window.PERSISTENT, //persistent(永世) or temporary(姑且)
1024*1024, //1M
onInitFs, //乐成后的回调函数
errorHandler); //错误后的回调函数

回调函数


代码如下:
function onInitFs(fs){
fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) {
console.log('You have just created the ' + dirEntry.name + ' directory.');
}, errorHandler);
}
//错误回调
function errorHandler(err){
var msg = 'An error occured: ';
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg += 'File or directory not found';
break;
case FileError.NOT_READABLE_ERR:
msg += 'File or directory not readable';
break;
case FileError.PATH_EXISTS_ERR:
msg += 'File or directory already exists';
break;
case FileError.TYPE_MISMATCH_ERR:
msg += 'Invalid filetype';
break;
default:
msg += 'Unknown Error';
break;
};
console.log(msg + err);
}

假如乐成反悔挪用OnInitFs回调函数,在内里用了getDirectory要领用来建设一个文件夹,这下面再说。

可是这是有个题目,这样做的话每次加载页面城市申请,这必定不是我们想要的,我们要 的是在稀有据的时辰就可以读取数据。

判定是否申请过空间
以是我们必要读取赏识器的数据,看看是否已有存储。这就用到了另一个API:


代码如下:
void queryUsageAndQuota(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

这个API可以查询当前web的空间环境,假如乐成的话就会挪用successCallback回调函数 并把已用空间和所有空间作为参数传入要领中。假如失败则调去errorCallback。


代码如下:
window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, remaining){
if(remaining == ""){
console.log("未申请空间。");
}else{
console.log("已行使空间"+used);
console.log("所有空间"+remaining);
}
},
errorHandler); </p> <p>
我们可以通过判定remaining参数来判定是否有申请空间,假如没有申请,则返回上一步申请空间。 假如已经有空间的话,则必要获得空间的跟文件,这样才气操纵数据。

获取文件进口
FileSystem行使了非凡的文件体系和沙盒模式,在电脑上可能其他web中是无法会见沙盒中的文件的 ,只能用对应的名目去会见。

在赏识器中输入:

?filesystem:http://catcoder.com/persistent/
  

这样可以会见catcoder.com这个网站在本机永世数据,把persistent换成temporary则是读取姑且空间。

然后我们就可以通过URL和对应API获取文件的进口(Lets you look up the entry for a file or directory with a local URL)。


代码如下:
void resolveLocalFileSystemURL(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

下面就可以读取本机存储的数据了


代码如下:
var url = "filesystem:http://" + window.location.host + "/persistent/catwrite_documents/";
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader();
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title("默认文件", "");
console.log("没有文件!");
}else{
console.log("读取到" + results.length + "个文件");
for(var i = 0; i < results.length; i++){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name);
}
}
},errorHandler);
};
readEntries();
},errorHandler);

本文地址:http://itbyc.com/web/html5/13636.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1