https://github.com/scscms/filesystem
基于chrome浏览器的FileSystem提供了文件夹和文件的创建、移动、删除等操作。
https://github.com/scscms/filesystem
Last synced: about 1 month ago
JSON representation
基于chrome浏览器的FileSystem提供了文件夹和文件的创建、移动、删除等操作。
- Host: GitHub
- URL: https://github.com/scscms/filesystem
- Owner: scscms
- Created: 2016-06-02T08:51:08.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-03T09:24:01.000Z (over 8 years ago)
- Last Synced: 2025-04-04T17:22:02.651Z (about 2 months ago)
- Language: JavaScript
- Size: 4.28 MB
- Stars: 29
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FileSystemshine
### 1、简介
FileSystem提供了文件夹和文件的创建、移动、删除等操作,大大方便了数据的本地处理,而且所有的数据都是在沙盒(sandboxed)中,不同的web程序不能互相访问,这就保证了数据的完整和安全。
目前只有Chrome浏览器对FileSystem API支持,所以只能运行在Chrome浏览器中。
应用场景:- [x] 1.持久型上传器
>选中要上传的文件或目录后,系统会将文件复制到本地沙盒并批次上传。即使发生浏览器崩溃、网络中断等状况,也可在之后重新开始上传。
- [x] 2.视频游戏、音乐或其他具有大量媒体资产的应用
>预先下载文件,需要用时无需等待。
- [x] 3.可使用离线访问权限或本地存储的高速音频/照片编辑器
>通过创建目录来整理项目文件这一功能非常有用。
>修改后的文件应可供客户端应用 \[iTunes、Picasa] 访问。- [x] 4.离线web存储
>下载网络文件本地存储,区别其他本地文件存储的是,本存储可管理。本地文件可通过二进制地址或者filesystem:协议访问,形成本地web网站。这正是我使用的功能。### 2、申请空间
>如果开发功能开放给用户使用建议申请临时空间存储,如果自己使用可申请永久存储空间。因为申请永远存储需要用户同意才能执行。```JavaScript
//文件系统请求标识window.webkitRequestFileSystem用于兼容旧版chrome
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//接着向浏览器申请空间
window.requestFileSystem(window.TEMPORARY, //PERSISTENT(永久) or TEMPORARY(临时)
1024*1024, //1M
initialize, //成功后的回调函数
errorHandler); //错误后的回调函数
```
但是我们不希望每次访问网页都去申请空间,可以先判断是否申请过空间来处理。完整代码:
```JavaScript
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var fileSystemObj = {
fs : null,//文件系统对象
size : 52428800,//申请50M临时空间 50*1024*1024
errorHandler:function(e){
//处理各种错误
switch (e.name) {
case 'QuotaExceededError':
break;
case 'NotFoundError':
break;
case 'SecurityError':
break;
case 'InvalidStateError':
break;
case 'InvalidModificationError':
break;
default:
}
},
initialize : function() {
//初始化
window.requestFileSystem(TEMPORARY, this.size, function (fs) {
fileSystemObj.fs = fs;
})
}
};
if(window.requestFileSystem) {
navigator.webkitTemporaryStorage.queryUsageAndQuota(function (usage, quota) {
//usage已经使用的空间,quota申请的总空间
if (!quota) {
//还没有申请过空间
navigator.webkitTemporaryStorage.requestQuota(fileSystemObj.size, function (grantedBytes) {
fileSystemObj.initialize();
}, fileSystemObj.errorHandler);
}else{
fileSystemObj.initialize();
}
});
}
```
### 3、创建文件
```JavaScript
window.requestFileSystem(TEMPORARY, this.size, function (fs) {
fileSystemObj.fs = fs;
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
console.log(fileEntry);//留意它的几个属性
// 生成FileWriter对象
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
console.log('写入完成');
};
fileWriter.onerror = function(e) {
console.log('写入失败: ' + e.toString());
};
//可以创建ArrayBuffer、Blob等对象写入文件,但不建议使用BlobBuilder弃用方法
fileWriter.write(new Blob(["something"], {type: "text/plain"}));
}, fileSystemObj.errorHandler);
}, fileSystemObj.errorHandler);
})
```
其中fs.root.getFile意思是在根目录下获取文件。create: true表示假如文件不存在就自动创建。而exclusive: true表示保证文件的唯一性,即假如文件存在时不继续执行后面的代码,立刻返回文件。
案例查看 [createFile.html](https://rawgit.com/scscms/FileSystem/master/createFile.html)
### 4、读取文件
getFile获取文件后可以使用FileReader对象读取文件内容。
```JavaScript
fs.root.getFile('log.txt', {}, function(fileEntry) {
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);
}, fileSystemObj.errorHandler);
}, fileSystemObj.errorHandler);
```
案例查看[readerFile.html](https://rawgit.com/scscms/FileSystem/master/readerFile.html)
### 5、创建文件夹
```JavaScript
fs.root.getDirectory("abc", {create: true}, function(dirEntry) {
//ok
}, fileSystemObj.errorHandler);
```
getDirectory是获取文件夹函数,重点在于添加了{create: true}属性,当文件夹不存在时自动创建。
我们还可以通过修改函数达到创建"abc/aa/cc"这种套嵌式的文件夹。
案例查看[readerFolder.html](https://rawgit.com/scscms/FileSystem/master/readerFolder.html)
### 6、罗列文件和文件夹
经过以上几个操作,在浏览器的filesystem系统里已经存在一些文件夹和文件,下面我们来罗列根目录下的文件和文件夹。
```JavaScript
//读取绝对地址方法
window.resolveLocalFileSystemURL=window.resolveLocalFileSystemURL||window.webkitResolveLocalFileSystemURL;
```
所谓绝对地址指的是filesystem:http:\/\/www.scscms.com/temporary形式的绝对地址。
当然我们也可以使用getDirectory方法获取相对本目录下的所有文件和文件夹。
案例查看[listFile.html](https://rawgit.com/scscms/FileSystem/master/listFile.html)
### 7、修改文件
修改文件与创建文件一样。只文档类型需要注意,同时默认保存为utf-8编码。写入模式重点需要注意。
### 8、复制文件或文件夹
复制文件有两种形式,一是用户选择硬盘的文件,另一种是filesystem复制filesystem里的文件。
第一种形式几乎可以理解是克隆,靠getFile,createWriter形式重建文件。而后者可使用moveTo、copyTo形式直接移动或者复制
FileEntry 和 DirectoryEntry 均可使用 copyTo() 复制现有条目。该方法会自动以递归方式复制文件夹。
```JavaScript
function copy(cwd, src, dest) {
cwd.getFile(src, {}, function(fileEntry) {cwd.getDirectory(dest, {}, function(dirEntry) {
fileEntry.copyTo(dirEntry);
}, errorHandler);}, errorHandler);
}
```
### 9、删除文件
```JavaScript
fileSystemObj.fs.root.getFile(file,{create: false}, function(fileEntry) {
fileEntry.remove(function(){
//has been deleted
}, fileSystemObj.errorHandler);
}, fileSystemObj.errorHandler);
```
### 10、删除文件夹
```JavaScript
fileSystemObj.fs.root.getDirectory("An absolute folder path",{}, function (dirEntry) {
dirEntry.removeRecursively(function() {
//has been deleted
}, fileSystemObj.errorHandler);
});
```
以递归方式删除目录。如果您不需要某个包含条目的目录,不妨使用 removeRecursively()。该方法将以递归方式删除目录及其内容。
以下代码会以递归方式删除“music”目录及其包含的所有文件和目录:
```JavaScript
fileSystemObj.fs.root.getDirectory('/misc/xxx/music', {}, function(dirEntry) {
dirEntry.removeRecursively(function() {
console.log('Directory removed.');
}, fileSystemObj.errorHandler);
}, fileSystemObj.errorHandler);
```
### 2、ajax下载文件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);