JavaScript File API实现文件上传预览

下面是“JavaScript File API实现文件上传预览”的完整攻略。

1. 前置知识

在学习“JavaScript File API实现文件上传预览”之前，需要了解以下基础知识：

JavaScript的DOM操作；
HTML的文件上传控件<input type="file">；
JavaScript基础知识，如变量、函数、语法等。

2. 实现步骤

2.1 获取上传控件中的文件

在HTML中使用<input type="file">控件上传文件时，在用户选择文件后，控件会自动把文件存储在一个FileList对象中，我们需要获取其中的文件。

const fileInput = document.querySelector('input[type="file"]');
const files = fileInput.files;

2.2 使用FileReader读取文件数据

JavaScript的FileReader对象提供了读取文件数据的接口，在读取完毕后会触发load事件。我们可以在该事件中处理读取的数据。

const fileReader = new FileReader();
fileReader.onload = function (e) {
  const data = e.target.result;
  // 处理读取的数据
};
fileReader.readAsDataURL(file);

在上述代码中，我们新建了一个FileReader对象，并给其添加onload事件，该事件会在读取完毕后触发。在事件处理函数中，我们可以通过e.target.result获取读取的数据。

2.3 显示文件预览

在获取了文件数据后，我们就可以根据文件类型，将文件数据渲染到网页上，展示给用户。

if (file.type.startsWith('image/')) {
  const img = document.createElement('img');
  img.src = data;
  document.body.appendChild(img);
} else if (file.type.startsWith('audio/')) {
  const audio = document.createElement('audio');
  audio.controls = true;
  audio.src = data;
  document.body.appendChild(audio);
} else {
  // 如果是其他类型的文件，则可以展示文件名、大小等信息
}

在上述代码中，我们通过判断文件类型，创建对应的<img>或<audio>元素，并将文件数据赋值给其src属性，从而展示文件预览效果。

2.4 完整示例代码

下面是一个完整的示例代码，演示如何使用JavaScript File API实现文件上传预览。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传预览</title>
</head>
<body>
  <input type="file">
  <script>
    const fileInput = document.querySelector('input[type="file"]');
    fileInput.addEventListener('change', function (e) {
      const files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileReader = new FileReader();

        fileReader.onload = function (e) {
          const data = e.target.result;

          if (file.type.startsWith('image/')) {
            const img = document.createElement('img');
            img.src = data;
            document.body.appendChild(img);
          } else if (file.type.startsWith('audio/')) {
            const audio = document.createElement('audio');
            audio.controls = true;
            audio.src = data;
            document.body.appendChild(audio);
          } else {
            // 如果是其他类型的文件，则可以展示文件名、大小等信息
          }
        };

        fileReader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>

3. 示例说明

3.1 案例一：经典图片上传预览

以下是一个典型的图片上传预览案例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传预览</title>
</head>
<body>
  <input type="file">
  <div id="preview"></div>
  <script>
    const fileInput = document.querySelector('input[type="file"]');
    const preview = document.querySelector('#preview');

    fileInput.addEventListener('change', function (e) {
      const files = e.target.files;

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileReader = new FileReader();

        fileReader.onload = function (e) {
          const data = e.target.result;

          const img = document.createElement('img');
          img.src = data;
          preview.appendChild(img);
        };

        fileReader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>

在上述代码中，我们创建了一个包含<input type="file">和<div id="preview">两个元素的简单页面。当用户选择图片后，我们通过JavaScript代码，将图片预览展示在<div id="preview">元素中。

3.2 案例二：音频上传预览

除了图片预览之外，我们也可以使用JavaScript File API来实现音频上传预览。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>音频上传预览</title>
</head>
<body>
  <input type="file">
  <div id="preview"></div>
  <script>
    const fileInput = document.querySelector('input[type="file"]');
    const preview = document.querySelector('#preview');

    fileInput.addEventListener('change', function (e) {
      const files = e.target.files;

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileReader = new FileReader();

        fileReader.onload = function (e) {
          const data = e.target.result;

          const audio = document.createElement('audio');
          audio.controls = true;
          audio.src = data;
          preview.appendChild(audio);
        };

        fileReader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>

在上述代码中，我们修改了案例一的代码，并创建了一个音频上传预览的简单页面。当用户选择音频文件后，我们通过JavaScript代码，将音频预览展示在<div id="preview">元素中。可以发现，实现音频上传预览和图片上传预览的关键代码是一致的，只需要在判断文件类型时，添加判断条件即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript File API实现文件上传预览 - Python技术站