{"id":19545190,"url":"https://github.com/scscms/filesystem","last_synced_at":"2025-04-26T19:31:58.821Z","repository":{"id":93554804,"uuid":"60247998","full_name":"scscms/FileSystem","owner":"scscms","description":"基于chrome浏览器的FileSystem提供了文件夹和文件的创建、移动、删除等操作。","archived":false,"fork":false,"pushed_at":"2016-11-03T09:24:01.000Z","size":4493,"stargazers_count":29,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T17:22:02.651Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scscms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-02T08:51:08.000Z","updated_at":"2023-12-29T02:06:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"f95ea4ef-288f-4890-b73c-fa54151379f8","html_url":"https://github.com/scscms/FileSystem","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FFileSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FFileSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FFileSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FFileSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scscms","download_url":"https://codeload.github.com/scscms/FileSystem/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251041465,"owners_count":21527201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T03:36:20.607Z","updated_at":"2025-04-26T19:31:58.810Z","avatar_url":"https://github.com/scscms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FileSystem\u003csup\u003eshine\u003c/sup\u003e\n### 1、简介\nFileSystem提供了文件夹和文件的创建、移动、删除等操作，大大方便了数据的本地处理，而且所有的数据都是在沙盒(sandboxed)中，不同的web程序不能互相访问，这就保证了数据的完整和安全。\u003cbr/\u003e\n目前只有Chrome浏览器对FileSystem API支持，所以只能运行在Chrome浏览器中。\u003cbr/\u003e\n应用场景：\n\n- [x] 1.持久型上传器\n\n\u003e选中要上传的文件或目录后，系统会将文件复制到本地沙盒并批次上传。即使发生浏览器崩溃、网络中断等状况，也可在之后重新开始上传。\n\n- [x] 2.视频游戏、音乐或其他具有大量媒体资产的应用\n\n\u003e预先下载文件，需要用时无需等待。\n\n- [x] 3.可使用离线访问权限或本地存储的高速音频/照片编辑器\n\n\u003e通过创建目录来整理项目文件这一功能非常有用。\n\u003e修改后的文件应可供客户端应用 \\[iTunes、Picasa] 访问。\n\n- [x] 4.离线web存储\u003cbr/\u003e\n\u003e下载网络文件本地存储，区别其他本地文件存储的是，本存储可管理。本地文件可通过二进制地址或者filesystem:协议访问，形成本地web网站。这正是我使用的功能。\n\n### 2、申请空间\n\u003e如果开发功能开放给用户使用建议申请临时空间存储，如果自己使用可申请永久存储空间。因为申请永远存储需要用户同意才能执行。\n\n```JavaScript\n//文件系统请求标识window.webkitRequestFileSystem用于兼容旧版chrome\nwindow.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;\n//接着向浏览器申请空间\nwindow.requestFileSystem(window.TEMPORARY, //PERSISTENT(永久) or TEMPORARY(临时)\n    1024*1024, //1M\n    initialize, //成功后的回调函数\n    errorHandler); //错误后的回调函数\n```\n但是我们不希望每次访问网页都去申请空间，可以先判断是否申请过空间来处理。完整代码：\n```JavaScript\nwindow.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;\nvar fileSystemObj = {\n    fs          : null,//文件系统对象\n    size        : 52428800,//申请50M临时空间 50*1024*1024\n    errorHandler:function(e){\n        //处理各种错误\n        switch (e.name) {\n            case 'QuotaExceededError':\n                break;\n            case 'NotFoundError':\n                break;\n            case 'SecurityError':\n                break;\n            case 'InvalidStateError':\n                break;\n            case 'InvalidModificationError':\n                break;\n            default:\n        }\n    },\n    initialize  : function() {\n        //初始化\n        window.requestFileSystem(TEMPORARY, this.size, function (fs) {\n            fileSystemObj.fs = fs;\n        })\n    }\n};\nif(window.requestFileSystem) {\n    navigator.webkitTemporaryStorage.queryUsageAndQuota(function (usage, quota) {\n        //usage已经使用的空间，quota申请的总空间\n        if (!quota) {\n            //还没有申请过空间\n            navigator.webkitTemporaryStorage.requestQuota(fileSystemObj.size, function (grantedBytes) {\n                fileSystemObj.initialize();\n            }, fileSystemObj.errorHandler);\n        }else{\n            fileSystemObj.initialize();\n        }\n    });\n}\n```\n### 3、创建文件\n```JavaScript\nwindow.requestFileSystem(TEMPORARY, this.size, function (fs) {\n    fileSystemObj.fs = fs;\n    fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {\n        console.log(fileEntry);//留意它的几个属性\n        // 生成FileWriter对象\n        fileEntry.createWriter(function(fileWriter) {\n            fileWriter.onwriteend = function(e) {\n                console.log('写入完成');\n            };\n            fileWriter.onerror = function(e) {\n                console.log('写入失败: ' + e.toString());\n            };\n            //可以创建ArrayBuffer、Blob等对象写入文件，但不建议使用BlobBuilder弃用方法\n            fileWriter.write(new Blob([\"something\"], {type: \"text/plain\"}));\n        }, fileSystemObj.errorHandler);\n    }, fileSystemObj.errorHandler);\n})\n```\n其中fs.root.getFile意思是在根目录下获取文件。create: true表示假如文件不存在就自动创建。而exclusive: true表示保证文件的唯一性，即假如文件存在时不继续执行后面的代码，立刻返回文件。\n案例查看 [createFile.html](https://rawgit.com/scscms/FileSystem/master/createFile.html)\n### 4、读取文件\ngetFile获取文件后可以使用FileReader对象读取文件内容。\n```JavaScript\n    fs.root.getFile('log.txt', {}, function(fileEntry) {\n        fileEntry.file(function(file) {\n           var reader = new FileReader();    \n           reader.onloadend = function(e) {\n             var txtArea = document.createElement('textarea');\n             txtArea.value = this.result;\n             document.body.appendChild(txtArea);\n           }; \n           reader.readAsText(file);\n        }, fileSystemObj.errorHandler);    \n    }, fileSystemObj.errorHandler);\n```\n案例查看[readerFile.html](https://rawgit.com/scscms/FileSystem/master/readerFile.html)\n### 5、创建文件夹\n```JavaScript\n    fs.root.getDirectory(\"abc\", {create: true}, function(dirEntry) {\n        //ok\n    }, fileSystemObj.errorHandler);\n```\ngetDirectory是获取文件夹函数，重点在于添加了{create: true}属性，当文件夹不存在时自动创建。\n我们还可以通过修改函数达到创建\"abc/aa/cc\"这种套嵌式的文件夹。\n案例查看[readerFolder.html](https://rawgit.com/scscms/FileSystem/master/readerFolder.html)\n### 6、罗列文件和文件夹\n经过以上几个操作，在浏览器的filesystem系统里已经存在一些文件夹和文件，下面我们来罗列根目录下的文件和文件夹。\n```JavaScript\n//读取绝对地址方法\nwindow.resolveLocalFileSystemURL=window.resolveLocalFileSystemURL||window.webkitResolveLocalFileSystemURL;\n```\n所谓绝对地址指的是filesystem:http:\\/\\/www.scscms.com/temporary形式的绝对地址。\n当然我们也可以使用getDirectory方法获取相对本目录下的所有文件和文件夹。\n案例查看[listFile.html](https://rawgit.com/scscms/FileSystem/master/listFile.html)\n### 7、修改文件\n修改文件与创建文件一样。只文档类型需要注意，同时默认保存为utf-8编码。写入模式重点需要注意。\n### 8、复制文件或文件夹\n复制文件有两种形式，一是用户选择硬盘的文件，另一种是filesystem复制filesystem里的文件。\n第一种形式几乎可以理解是克隆，靠getFile,createWriter形式重建文件。而后者可使用moveTo、copyTo形式直接移动或者复制\nFileEntry 和 DirectoryEntry 均可使用 copyTo() 复制现有条目。该方法会自动以递归方式复制文件夹。\n```JavaScript\n    function copy(cwd, src, dest) {\n        cwd.getFile(src, {}, function(fileEntry) {\n\n            cwd.getDirectory(dest, {}, function(dirEntry) {\n                fileEntry.copyTo(dirEntry);\n            }, errorHandler);\n\n        }, errorHandler);\n    }\n```\n### 9、删除文件\n```JavaScript\nfileSystemObj.fs.root.getFile(file,{create: false}, function(fileEntry) {\n    fileEntry.remove(function(){\n        //has been deleted\n    }, fileSystemObj.errorHandler);\n}, fileSystemObj.errorHandler);\n```\n### 10、删除文件夹\n```JavaScript\nfileSystemObj.fs.root.getDirectory(\"An absolute folder path\",{}, function (dirEntry) {\n    dirEntry.removeRecursively(function() {\n        //has been deleted\n    }, fileSystemObj.errorHandler);\n});\n```\n以递归方式删除目录。如果您不需要某个包含条目的目录，不妨使用 removeRecursively()。该方法将以递归方式删除目录及其内容。\n以下代码会以递归方式删除“music”目录及其包含的所有文件和目录：\n```JavaScript\nfileSystemObj.fs.root.getDirectory('/misc/xxx/music', {}, function(dirEntry) {\n        dirEntry.removeRecursively(function() {\n            console.log('Directory removed.');\n        }, fileSystemObj.errorHandler);\n    }, fileSystemObj.errorHandler);\n```\n### 2、ajax下载文件\n\nfileEntry.getMetadata(successCallback, opt_errorCallback);\nfileEntry.remove(successCallback, opt_errorCallback);\nfileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);\nfileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);\nfileEntry.getParent(successCallback, opt_errorCallback);\nfileEntry.toURL(opt_mimeType);\n\nfileEntry.file(successCallback, opt_errorCallback);\nfileEntry.createWriter(successCallback, opt_errorCallback);","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Ffilesystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscscms%2Ffilesystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Ffilesystem/lists"}