在 Web 端使用 FileReader 对象展示文件内容

2024-02-03 09:28:26

导言

在 Web 开发中，能够访问和处理客户端文件是至关重要的。FileReader 对象提供了读取文件内容的强大机制，使我们能够在 Web 应用程序中展示图像、文本和其他类型文件。本文将探讨使用 FileReader 对象在 Web 端展示两种最常见文件类型（图像和文本）的常见方法。

在 Web 端展示图像

FileReader 对象可以轻松地从客户端计算机读取图像文件。通过以下步骤可以实现：

创建 FileReader 对象： 使用 new FileReader() 创建一个新的 FileReader 对象。
监听 load 事件： 添加一个 load 事件侦听器，以便在文件加载完成时执行回调函数。
读取文件： 使用 readAsDataURL() 方法读取图像文件。此方法将返回一个包含图像数据 URL 的字符串。
显示图像： 使用 <img> 标签将图像数据 URL 作为 src 属性设置，即可在 Web 端显示图像。

代码示例：

<input type="file" id="image-input" accept="image/*">

<script>
  const fileInput = document.getElementById('image-input');
  const reader = new FileReader();

  reader.onload = function() {
    const img = document.createElement('img');
    img.src = reader.result;
    document.body.appendChild(img);
  }

  fileInput.addEventListener('change', function() {
    const file = this.files[0];
    reader.readAsDataURL(file);
  });
</script>

在 Web 端展示文本

与图像类似，FileReader 对象也可以读取文本文件的内容。以下是实现步骤：

创建 FileReader 对象： 与图像一样，创建一个新的 FileReader 对象。
监听 load 事件： 添加一个 load 事件侦听器，在文件加载完成时执行回调函数。
读取文件： 使用 readAsText() 方法读取文本文件。此方法将返回一个包含文本文件内容的字符串。
显示文本： 使用 <p> 或 <div> 标签将文本文件内容作为内容设置，即可在 Web 端显示文本。

代码示例：

<input type="file" id="text-input" accept=".txt">

<script>
  const fileInput = document.getElementById('text-input');
  const reader = new FileReader();

  reader.onload = function() {
    const text = document.createElement('p');
    text.textContent = reader.result;
    document.body.appendChild(text);
  }

  fileInput.addEventListener('change', function() {
    const file = this.files[0];
    reader.readAsText(file);
  });
</script>