本地文件访问与JavaScript

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

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

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

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

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

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

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

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

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

    – 编辑 –

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

    更新此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,每次浏览器启动时只需要执行一次)

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

    如前所述, 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是由这个人保持在这里:)

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

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

    这是一个NW.js,通用GUI的框架:

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

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

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

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

    为了使用JSFS,您应该具备Java和Java EE开发(Servlet)的基础知识。

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

    假设任何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

    如果你有类似的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; } 

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

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