Answers:
如果用户通过选择文件<input type="file">
,则可以使用File API 读取和处理该文件。
设计不允许读取或写入任意文件。这违反了沙箱。从Wikipedia-> Javascript-> Security:
JavaScript和DOM为恶意作者提供了通过Web交付在客户端计算机上运行的脚本的潜力。浏览器作者使用两个限制来包含这种风险。首先,脚本在沙箱中运行,它们只能执行与Web相关的操作,而不能执行诸如创建文件之类的通用编程任务 。
2016更新:可以通过Filesystem API直接访问文件系统,该文件系统仅受Chrome和Opera支持,并且最终可能不会被其他浏览器实现(Edge除外)。有关详细信息,请参见Kevin的答案。
http://www.html5rocks.com/zh-CN/tutorials/file/dndfiles/中只是HTML5功能的更新。这篇出色的文章将详细解释JavaScript中的本地文件访问。所提到文章的摘要:
该规范提供了几种用于从“本地”文件系统访问文件的接口:
<input type="file" multiple>
从桌面上考虑或拖动文件目录)。请参阅下面的Paul D. Waite的评论。
更新此功能自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来完成这些操作的简单示例:
烘焙食品 *
写文件:
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不再处于标准轨道上,但在我看来,在某些情况下可以合理使用它们,因为:
但是,“某些情况”是否包含您自己的情况由您决定。
* BakedGoods由这个人负责维护:)
NW.js允许您使用Javascript创建桌面应用程序,而通常不会对浏览器施加所有安全限制。因此,您可以运行具有功能的可执行文件,或创建/编辑/读取/写入/删除文件。您可以访问硬件,例如当前的CPU使用率或正在使用的总内存等。
您可以使用它创建不需要任何安装的Windows,Linux或Mac桌面应用程序。
这是NW.js(通用GUI)的框架:
如果要在Windows上进行部署,则Windows脚本宿主为文件系统和其他本地资源提供了非常有用的JScript API。但是,将WSH脚本合并到本地Web应用程序中可能并不如您所愿。
如果您输入像
<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;
}
如果您需要访问客户端上的整个文件系统,读取/写入文件,监视文件夹中的更改,启动应用程序,对文档进行加密或签名等,请查看JSFS。
它允许您从网页安全无限制地访问客户端上的计算机资源,而无需使用AcitveX或Java Applet之类的浏览器插件技术。但是,也必须安装软件的安全性。
为了使用JSFS,您应该具有Java和Java EE开发(Servlet)的基础知识。
请在这里找到JSFS:https : //github.com/jsfsproject/jsfs。它是免费的,并根据GPL授权
假定用户可能直接允许使用JavaScript代码可能需要的任何文件。著名浏览器的创建者通常不允许JavaScript访问文件。
该解决方案的主要思想是:JavaScript代码无法通过具有其本地URL来访问文件。但是它可以通过拥有DataURL来使用文件:因此,如果用户浏览并打开文件,JavaScript应该直接从HTML获取“ DataURL”,而不是获取“ URL”。
然后,使用readAsDataURL函数和FileReader对象将DataURL转换为文件。源代码和更完整的指南以及一个很好的示例位于:
有一个(商业)产品“ localFS”,可用于在客户端计算机上读取和写入整个文件系统。
必须安装Small Windows应用,页面中必须包含.js文件。
作为一项安全功能,文件系统访问可以限制在一个文件夹中,并可以通过密钥进行保护。