您现在的位置是：网站首页> 编程资料编程资料

基于HTML5 FileSystem API的使用介绍html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2021-09-01 1059人已围观

简介 HTML5的强大之一就是允许web程序申请一些临时或者永久的空间（Quota）在这里可以进行数据的存储甚至文件的操作

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);


我们可以通过判断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);

上一篇：HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题html5中监听canvas内部元素点击事件的三种方法HTML5 创建canvas元素示例代码html5的canvas元素使用方法介绍(画矩形、画折线、圆形)浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

下一篇：HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦html5中几个不容错过的api或者tips小结5 个强大的HTML5 API 函数推荐HTML5中5个简单实用的APIhtml5中 media（播放器）的api使用指南HTML5学习笔记之History API

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网