Html HTML5 是否允许您从浏览器中与本地客户端文件进行交互
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2376745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does HTML5 allow you to interact with local client files from within a browser
提问by greye
I've seen some posts regarding access to files on a client machine by a webpage, namely this question.
我看过一些关于通过网页访问客户端机器上的文件的帖子,即这个问题。
I'm trying to hop on the "continuously update in the cloud" paradigm for some algorithms I am writing so my users can access the latest versions by simply accessing the webpage. This requires that the program/webpage can start with a directory and recursively inspect files within it and compute results based on what is found. In the end it also should be able to write the results file to the client's filesystem.
我正在尝试为我正在编写的某些算法采用“在云中持续更新”的范例,以便我的用户只需访问网页即可访问最新版本。这要求程序/网页可以从一个目录开始并递归检查其中的文件并根据找到的内容计算结果。最后,它还应该能够将结果文件写入客户端的文件系统。
One of the answers in that previous question mentions Google Gears but that has since been discontinued in favor of HTML5. Is access to a client directory possible within HTML5? How?
前一个问题中的一个答案提到了 Google Gears,但此后已停止支持 HTML5。是否可以在 HTML5 中访问客户端目录?如何?
I know why access by any webpage to local files is a security risk, but for my purpose I have no problem to ask the user for the appropriate permissions.
我知道为什么通过任何网页访问本地文件存在安全风险,但出于我的目的,我可以向用户询问适当的权限。
采纳答案by Tower
No, not directly at least. However, you have a number of choices here.
不,至少不是直接的。但是,您在这里有多种选择。
Currently your best choices are:
目前你最好的选择是:
- Drag and drop files from desktop, see a tutorial.
- Use input type file.
- Read the contents with the File API or submit the form. Read more on Mozilla Developer Centerabout reading the file dynamically.
- You can specify
multiple
attribute to read and open multiple files at once without having to have separate fields. - You can have an invisible input and "trigger a click" on it to open the file open dialog. See the previous Mozilla Developer Center link for details.
- Use the FileSystem APIwhich allows you to create, delete, read, modify files on the file system. Note: you get a sandboxed directory to work with, you can't access the whole system just like that.
- Use Java with signed appletsto access the whole file system. This requires the user to accept the signature.
- 从桌面拖放文件,请参阅教程。
- 使用输入类型文件。
- 使用 File API 阅读内容或提交表单。在Mozilla 开发人员中心阅读有关动态读取文件的更多信息。
- 您可以指定
multiple
属性以一次读取和打开多个文件,而不必具有单独的字段。 - 您可以有一个不可见的输入并在其上“触发单击”以打开文件打开对话框。有关详细信息,请参阅之前的 Mozilla 开发人员中心链接。
- 使用FileSystem API,它允许您在文件系统上创建、删除、读取、修改文件。注意:你得到一个沙盒目录来使用,你不能像那样访问整个系统。
- 使用带有签名小程序的Java来访问整个文件系统。这需要用户接受签名。
回答by Vanuan
Chrome 6 also will support the File API
Chrome 6 还将支持 File API
回答by Kevin
As previously mentioned, the FileSystemand FileAPIs, along with the FileWriterAPI, can be used to read and write files from the context of a browser tab/window to a client machine.
正如前面提到的,文件系统和文件的API,与沿FileWriter的API,可用于从浏览器标签/窗口到客户机上下文读取和写入文件。
There are several things pertaining to the FileSystem and FileWriter APIs which you should be aware of, some of which were mentioned, but are worth repeating:
您应该了解与 FileSystem 和 FileWriter API 相关的几件事,其中一些已被提及,但值得重复:
- Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
- Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
- Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
- A sandbox(a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
- A virtual file system(a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs
- API 的实现目前仅存在于基于 Chromium 的浏览器(Chrome 和 Opera)中
- 这两个 API 已于 2014 年 4 月 24 日从 W3C 标准轨道中删除,截至目前是专有的
- 将来有可能从实现浏览器中删除(现在是专有的)API
- 甲沙箱(在磁盘上以外的位置,其中文件可以产生没有影响)用于存储与所述的API所创建的文件
- 使用虚拟文件系统(一种目录结构,它不一定以与从浏览器中访问时相同的形式存在于磁盘上)表示使用 API 创建的文件
Here are simple examples of how the APIs are used, directly and indirectly, in tandem to do these things:
以下是如何直接和间接使用 API 来执行这些操作的简单示例:
烘焙食品*
Write file:
写入文件:
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Read file:
读取文件:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Using the raw File, FileWriter, and FileSystem APIs
使用原始 File、FileWriter 和 FileSystem API
Write file:
写入文件:
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);
Read file:
读取文件:
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);
Given the current statuses the FileSystem and FileWriter APIs, their utilization to read and write files currently does not constitute an "HTML5 way" of doing those things.
鉴于 FileSystem 和 FileWriter API 的当前状态,它们目前用于读取和写入文件的使用并不构成执行这些操作的“HTML5 方式”。
Renewed interest in the APIs from the un-implementing browser vendors may place them right back on the standards track, though. That, combined with the high market penetration of Chromium-based browsers and the fact that Google (the main contributer to Chromium) has not given and end-of-life date to the APIs should be enough to justify their use in some cases.
不过,未实施的浏览器供应商对 API 的重新关注可能会使它们重新回到标准轨道上。结合基于 Chromium 的浏览器的高市场渗透率以及 Google(Chromium 的主要贡献者)尚未给出 API 的生命周期结束日期这一事实,应该足以证明在某些情况下使用它们是合理的。
*BakedGoods is maintained by none other than this guy right here :)
* BakedGoods 是由这里的这个人维护的 :)