时间戳

首页 > 解决方案 > 如何通过 FileReader 和文件名读取本地文件

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

问题描述

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

// 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 代码中定义的按钮时，该操作将发生。

标签： javascripthtmlfilelocalfilereader

解决方案

您需要了解以下几点：

  1. FileReader 将从客户端计算机读取，而不是从托管 HTML 页面的服务器读取。根据您正在寻找模板的事实，我认为这不是您正在寻找的东西。除非您将模板提供给他们，否则访问您网站的人不会在他们的计算机上拥有这些模板。

  2. 您可能想从 Web 服务器获取（）资源。这将允许您动态和异步地执行此操作。这将需要一个能够提供隐藏输入中的文件的 Web 服务器。此外，您甚至可能不需要隐藏输入，因为它所做的只是保存一个硬编码的文件名字符串。

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

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

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

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

推荐阅读