HTML5是否允许您与浏览器内的本地客户端文件进行交互

Question

我看过一些关于访问客户机上的文件的网页，即question。

我试图跳过一些算法的“云中不断更新”范例，因此我的用户只需访问网页即可访问最新版本。这要求程序/网页可以从一个目录开始，递归地检查其中的文件并根据找到的结果计算结果。最后，它也应该能够将结果文件写入客户端的文件系统。

上一个问题中的答案之一提到了Google Gears，但之后已停止使用HTML5。 访问HTML5中可能的客户目录吗？怎么样？

我知道为什么通过任何网页访问本地文件是一种安全风险，但为了我的目的，我没有问题要求用户提供适当的权限。

Answer 1

不，至少不是。但是，您在这里有许多选择。

目前您最好的选择是：

• 拖动并从桌面拖放文件，请参阅a tutorial。
• 使用输入类型文件。
  • 使用File API读取内容或提交表单。有关动态读取文件的更多信息，请参见Mozilla Developer Center。
  • 您可以指定multiple属性来一次读取和打开多个文件，而不必具有单独的字段。
  • 你可以有一个不可见的输入和“触发点击”来打开文件打开对话框。有关详细信息，请参阅以前的Mozilla Developer Center链接。
• 使用FileSystem API它允许您创建，删除，读取，修改文件系统上的文件。注意：你会得到一个沙盒目录，你不能像这样访问整个系统。
• 使用Java与signed applets来访问整个文件系统。这要求用户接受签名。

Answer 2

的Chrome 6也将支持文件API

Answer 3

正如前面提到的，FileSystem和File的API，与FileWriter API一起，可用于从浏览器选项卡中的上下文读取和写入文件/窗口到客户机。

有关于文件系统和FileWriter的API的，你应该知道，其中一些被提及的几件事情，但值得重复：

这些API的

• 实现目前只存在铬基（Google浏览器&歌剧）
• 无论是原料药带下的W3C标准跟踪2014年4月24日，但截至目前是专有的（现在的专利）的API
• 脱除实现浏览器的未来是可能性
• 甲沙箱（在磁盘外哪些文件可以产生没有影响的位置）用于存储与所述的API创建的文件
• 甲虚拟文件系统（一个目录结构，其并不一定存在于磁盘上以与从浏览器访问时相同的形式）被使用表示使用API​​创建的文件

下面是简单的例子，说明如何直接或间接地使用API​​来做这些事情：

BakedGoods *

写入文件：

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

使用RAW文件，FileWriter的，和文件系统的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); 

鉴于当前状态的文件系统和FileWriter的的API，其利用读取和写入文件目前不构成做这些事情的“HTML5的方式”。尽管如此，从未实施的浏览器供应商对API的重新兴趣可能会使它们重新回到标准轨道上。这加上基于Chromium的浏览器的高市场渗透率以及谷歌（Chromium的主要贡献者）未向API提供和报废日期的事实应该足以证明其在某些情况下的使用。

* BakedGoods是不是别人这家伙就在这里:)