JS中利用FileReader实现上传图片前本地预览功能

下面是详细讲解 JS 中利用 FileReader 实现上传图片前本地预览功能的完整攻略：

什么是 FileReader

FileReader 是 HTML5 新增的一个 API，它允许网页异步读取存储在用户计算机上的文件数据，使用该 API 可以实现文件的预览、上传、加密等功能。

使用 FileReader 实现上传图片前本地预览功能的步骤

1. 获取 file 对象

在网页中上传文件时，会触发 change 事件。我们需要在该事件的回调函数中获取选中的文件对象，如下所示：

<input type="file" onchange="previewImage(event)">

function previewImage(event) {
  const file = event.target.files[0];
}

1. 创建 FileReader 对象

创建 FileReader 对象，使用它读取文件数据，如下所示：

function previewImage(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
}

1. 监听 load 事件

当 FileReader 对象读取文件完成时，会触发 load 事件。在该事件的回调函数中，我们可以获取文件的数据并进行预览，如下所示：

function previewImage(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

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

以上代码会在当前页面中创建一个图片元素，将文件数据显示在该元素中。

示例

下面给出两个实例，第一个是将本地图片进行预览，第二个是将本地音频文件进行预览。

预览图片

<input type="file" onchange="previewImage(event)">

function previewImage(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

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

预览音频

<input type="file" accept="audio/*" onchange="previewAudio(event)">

function previewAudio(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function (e) {
    const audio = document.createElement('audio');
    audio.src = e.target.result;
    audio.controls = true;
    document.body.appendChild(audio);
  };
  reader.readAsDataURL(file);
}

以上两个示例分别演示了如何利用 FileReader API 实现上传图片前本地预览、上传音频前本地预览的功能。它们在代码上的区别只是 accept 属性的值不同，一个是图片类型，一个是音频类型，其他操作都相同。