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

Question

我看过一些关于通过网页访问客户端计算机上的文件的帖子，即question。

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

上一个问题中的一个答案提到了 Google Gears，但后来不再支持 HTML5。 是否可以在 HTML5 中访问客户端目录？怎么样？

我知道为什么任何网页访问本地文件都会带来安全风险，但出于我的目的，我可以毫无问题地要求用户提供适当的权限。

Answer 1

不，至少不是直接的。但是，您有很多选择。

目前你最好的选择是：

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

Answer 2

Chrome 6 也将支持 File API

Answer 3

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

您应该注意一些与 FileSystem 和 FileWriter API 有关的事情，其中​​一些已经提到，但值得重复：

• API 的实现目前仅存在于基于 Chromium 的浏览器（Chrome 和 Opera）中
• 这两个 API 均已于 2014 年 4 月 24 日脱离 W3C 标准轨道，并且现在是专有的
• 将来有可能从实现浏览器中删除（现在是专有的）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){}
});

使用原始 File、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);

鉴于 FileSystem 和 FileWriter API 的当前状态，它们用于读取和写入文件的用途目前并不构成执行这些操作的“HTML5 方式”。

不过，未实现的浏览器供应商对 API 的重新兴趣可能会使它们重新回到标准轨道上。再加上基于 Chromium 的浏览器的高市场渗透率，以及谷歌（Chromium 的主要贡献者）尚未给出 API 的生命周期终止日期的事实，应该足以证明它们在某些情况下的使用是合理的。

*BakedGoods 由这里的这个人维护 :)