Question

在html5中有一个FileReader类。互联网上的所有示例，例如FileReader examle，显示如何处理文件对话框，即用户单击按钮，然后出现弹出窗口，以允许从文件系统中选择文件。我想做类似的事情，但没有文件对话框。假设我有一台服务器，并且依赖模板。在模板中，我可以创建任何隐藏的输入，并且希望从输入值（例如

）中读取文件

// html code snippet (created by a server via template engine)
<input type="hidden" id="file-a" value="somefile.txt" />
<button onclick="MyFunction()">Read</button>

现在，在javascript中，我想定义MyFunction，它将从隐藏的输入标签读取我的文件并调用FileReader API。当有人单击HTML代码中的已定义按钮时，该操作就会发生。

Answer 1

您需要了解几件事：

FileReader将从客户端计算机读取，而不从承载HTML页面的服务器读取。基于您正在寻找模板的事实，我认为这不是您要寻找的。除非您将模板提供给他们，否则访问您网站的用户不会在他们的计算机上拥有这些模板。
您可能想从Web服务器中获取（）资源。这将允许您动态和异步地执行此操作。这将需要一台能够提供隐藏输入中文件的Web服务器。此外，您甚至不需要隐藏的输入，因为它只需要保存文件名的硬编码字符串即可。

如果您想使用fetch（），我建议您阅读MDN documentation

如果您仍然坚持使用FileReader API从客户端计算机读取模板，则必须做一些奇怪的事情（因为它不是为此目的而设计的）。注意：由于您正在隐藏用户读取的文件，因此这种行为可能被认为是恶意的。

您可以创建一个由CSS隐藏的输入[type = file] （style ='display：none'）
添加一个onchange事件处理程序以触发您的MyFunction
将输入的值更新为您的文件名想要，这会触发onchange

请参阅FileReader API上的文档，动态添加更改侦听器

如何通过FileReader和文件名读取本地文件

1 个答案: