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

我看到过一些关于通过网页访问客户端机器上的文件的帖子，就是这样

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

前一个问题的答案中有一个提到了谷歌Gears，但后来为了支持HTML5而停止了。 HTML5中是否可以访问客户端目录？怎么做

---

我知道为什么任何网页访问本地文件都存在安全风险，但出于我的目的，我可以向用户请求适当的权限。

不，至少不能直接访问。但是，这里有很多选择

目前，您的最佳选择是：

• 从桌面拖放文件，请参见。（针对恶意软件/网络钓鱼禁用链接）
• 使用输入类型文件。
  • 使用文件API阅读内容或提交表单。阅读有关动态读取文件的详细信息
  • 您可以指定

    multiple

    属性以一次读取和打开多个文件，而不必有单独的字段
  • 你可以有一个不可见的输入，点击它打开文件打开对话框。有关详细信息，请参阅之前的Mozilla开发者中心链接
• 使用，可以在文件系统上创建、删除、读取和修改文件。注意：如果要使用沙盒目录，就不能像那样访问整个系统
• 使用Java访问整个文件系统。这要求用户接受签名

---

Chrome 6还将支持文件API

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

关于文件系统和FileWriter API，您应该注意以下几点，其中一些已经提到，但值得重复：

• API的实现目前仅存在于基于Chrome的浏览器（Chrome和Opera）中
• 这两个API于2014年4月24日脱离了W3C标准轨道，截至目前为专有
• 将来可以从实现浏览器中删除（现在是专有的）API
• 沙盒（磁盘上的一个位置，文件在该位置之外不会产生任何效果）用于存储使用API创建的文件
• 一个虚拟文件系统（磁盘上的目录结构不一定与从浏览器中访问时的形式相同）用于表示使用API创建的文件

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

*

写入文件：

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

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

读取文件：

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

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

写入文件：

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

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

读取文件：

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

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的维护者正是这个家伙：）

你最后是怎么做到的？我正在对具有完全文件系统访问权限的浏览器应用程序进行同样的分析。谢谢Shi Kai，你知道你上面关于HTML5不允许完全文件系统访问的说法是否仍然成立吗？正在尝试为浏览器内或浏览器外文件系统访问找到一个好的解决方案。理想情况下，解决方案将使用web开发技术，如HTML5/Silverlight/AdobeAIR。谢谢Dave@Dave：从现在（2011年2月10日）到可预见的未来，HTML5将不会直接提供对用户文件系统的读/写访问。Chrome（）中有一些规范和实现，但它只允许您在沙盒目录中运行操作，而不能访问外部文件。我认为Java具有最大的能力，允许您在系统上写入/读取几乎任何文件，如果您首先对小程序进行签名的话。显然，用户将被要求信任签名。2014年4月，在公共webapps上宣布，其他浏览器不考虑文件系统API规范。目前，该API是特定于Chrome的，不太可能由其他浏览器实现，也不再被W3C标准化。src: