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

【问题标题】：How to read local file via FileReader and file name如何通过 FileReader 和文件名读取本地文件
【发布时间】：2018-12-19 19:38:49
【问题描述】：

在 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 代码中定义的按钮时，该动作就会发生。

【问题讨论】：

“somefile.txt”在哪里？如果您询问是否可以在不通过文件打开对话框的情况下从用户的本地计算机读取文件，则不能。

标签： javascript html file local filereader

【解决方案1】：

有几件事你需要知道：

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

如果您希望使用 fetch()，我建议您阅读 MDN documentation

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

您可以创建一个被 CSS 隐藏的 input[type=file] (style='display:none')
添加一个 onchange 事件处理程序来触发你的 MyFunction
将输入值更新为您的文件名想要，触发onchange

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

【讨论】：