本地文件访问与JavaScript

是否有任何使用JavaScript进行的本地文件操作？ 我正在寻找一个解决scheme，可以完成没有安装足迹需要AIR。

具体来说，我想从文件中读取内容并将这些内容写入另一个文件。 在这一点上我不担心获得权限，只是假设我已经有这些文件的完全权限。

Answer 1

如果用户通过<input type="file">select文件，则可以使用File API 读取并处理该文件。

读或写任意文件是不允许的devise。 这是对沙箱的违反。 维基百科 – > Javascript – >安全 ：

JavaScript和DOM为恶意作者提供了通过Web在客户端计算机上运行脚本的潜力。 浏览器作者使用两个限制包含这个风险。 首先，脚本运行在一个只能执行web相关操作的沙箱中，而不是像创build文件这样的通用编程任务。

2016年更新 ：直接访问文件系统可能通过文件系统API ， 它只支持Chrome和Opera，并可能最终不会被其他浏览器 （ Edge除外 ）实施。 详情请看Kevin的回答 。

Answer 2

只是HTML5function的更新http://www.html5rocks.com/en/tutorials/file/dndfiles/这篇优秀的文章将详细介绍Javascript的本地文件访问。; 从提到的文章摘要：

该规范提供了几个从“本地”文件系统访问文件的接口：

1. 文件 – 一个单独的文件; 提供只读信息，如名称，文件大小，MIMEtypes和对文件句柄的引用。
2. FileList – File对象的一个​​类似数组的序列。 （Think <input type="file" multiple>或从桌面拖动文件目录）。
3. Blob – 允许将文件分割成字节范围。

– 编辑 –

请参阅下面的Paul D. Waite的评论

Answer 3

更新此function从Firefox 17以来删除（请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ）。

---

在Firefox上，您（程序员）可以在JavaScript文件中执行此操作：

 netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); 

并且您（浏览器用户）将被提示允许访问。 （对于Firefox，每次浏览器启动时只需要执行一次）

如果浏览器用户是他人，他们必须授予权限。

Answer 4

如前所述， FileSystem和File API以及FileWriter API可用于从浏览器选项卡/窗口的上下文中读取和写入文件到客户端机器。

有几个与FileSystem和FileWriter API相关的东西，你应该知道，其中一些被提到，但是值得重复：

• 这些API的实现目前只存在于基于Chromium的浏览器（Chrome和Opera）
• 这两个API都是2014年4月24日从W3C标准轨道中脱离出来的，现在是专有的
• 将来从实施的浏览器中删除（现在是专有的）API是可能的
• 一个沙盒 （磁盘上的文件不能产生任何效果的位置）用于存储使用API​​创build的文件
• 使用虚拟文件系统 （在浏览器中访问时不必以磁盘forms存在的目录结构）代表使用API​​创build的文件

下面是一些简单的例子，说明如何直接或间接地使用API​​来完成这些工作：

烘焙食品 *

写入文件：

 bakedGoods.set({ data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}], storageTypes: ["fileSystem"], options: {fileSystem:{storageType: Window.PERSISTENT}}, complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){} }); 

读取文件：

 bakedGoods.get({ data: ["testFile"], storageTypes: ["fileSystem"], options: {fileSystem:{storageType: Window.PERSISTENT}}, complete: function(resultDataObj, byStorageTypeErrorObj){} }); 

使用原始文件，FileWriter和FileSystem API

写入文件：

 function onQuotaRequestSuccess(grantedQuota) { function saveFile(directoryEntry) { function createFileWriter(fileEntry) { function write(fileWriter) { var dataBlob = new Blob(["Hello world!"], {type: "text/plain"}); fileWriter.write(dataBlob); } fileEntry.createWriter(write); } directoryEntry.getFile( "testFile", {create: true, exclusive: true}, createFileWriter ); } requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile); } var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess); 

读取文件：

 function onQuotaRequestSuccess(grantedQuota) { function getfile(directoryEntry) { function readFile(fileEntry) { function read(file) { var fileReader = new FileReader(); fileReader.onload = function(){var fileData = fileReader.result}; fileReader.readAsText(file); } fileEntry.file(read); } directoryEntry.getFile( "testFile", {create: false}, readFile ); } requestFileSystem(Window.PERSISTENT, grantedQuota, getFile); } var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess); 

尽pipeFileSystem和FileWriter API不再处于标准轨道，但在某些情况下，它们的使用是合理的，在我看来，因为：

• 来自未执行的浏览器供应商的重新兴趣可能会把它们放回去
• 实施（铬）浏览器的市场渗透率很高
• Google（Chromium的主要贡献者）并没有给出API的提交date

然而，“某些情况”是否包含您自己的情况是由您决定的。

* BakedGoods是由这个人保持在这里:)

Answer 5

NW.js允许您使用Javascript创build桌面应用程序，而不必在浏览器上通常放置任何安全限制。 所以你可以用一个函数运行可执行文件，或者创build/编辑/读/写/删除文件。 您可以访问硬件，例如当前CPU使用率或使用的总RAM等。

您可以创build一个Windows，Linux或Mac桌面应用程序，不需要任何安装。

• http://nwjs.io

这是一个NW.js，通用GUI的框架：

• http://ugui.io

Answer 6

如果您在Windows上进行部署，则Windows脚本宿主为文件系统和其他本地资源提供非常有用的JScript API。 但是，将WSH脚本合并到本地Web应用程序中可能不像您所希望的那样优雅。

Answer 7

FSO.js封装了由W3C标准化的新HTML5 FileSystem API，并提供了一种读取，写入或遍历本地沙盒文件系统的极其简单的方法。 它是asynchronous的，所以文件IO不会干扰用户体验。 🙂

Answer 8

如果您需要访问客户端上的整个文件系统，读取/写入文件，查看文件夹以进行更改，启动应用程序，encryption或签署文档等，请查看JSFS。

它允许从您的网页安全无限地访问客户端上的计算机资源，而无需使用像AcitveX或Java Applet这样的浏览器插件技术。 但是，也必须安装软件的和平。

为了使用JSFS，您应该具备Java和Java EE开发（Servlet）的基础知识。

请在这里findJSFS： https ： //github.com/jsfsproject/jsfs 。 它是免费的，根据GPL授权

Answer 9

假设任何js可能需要的文件都应该被用户直接允许，着名浏览器的创build者一般不会让javascript访问文件。

解决scheme的主要思想是：javascript不能通过使用本地URL来访问文件。 但它可以通过使用DataURL来使用该文件：因此，如果用户浏览文件并将其打开，js应直接从HTML获取“DataURL”，而不是获取“URL”。

然后它使用readAsDataURL函数和FileReader对象将DataURL转换为文件。 来源和一个很好的例子一个更完整的指南：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

Answer 10

如果你有类似的input字段

 <input type="file" id="file" name="file" onchange="add(event)"/> 

您可以以BLOB格式获取文件内容：

 function add(event){ var userFile = document.getElementById('file'); userFile.src = URL.createObjectURL(event.target.files[0]); var data = userFile.src; } 

Answer 11

如果您正在使用angularjs＆aspnet / mvc来检索json文件，则必须在webconfiguration中允许mimetypes

 <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent>