HTML 使用JavaScript FileReader API逐个读取多个文件的示例

在本文中，我们将介绍如何使用JavaScript FileReader API逐个读取多个文件。FileReader API允许网页应用程序通过JavaScript读取用户计算机上的文件内容。通过该API，我们可以实现文件的异步读取，从而更好地管理和处理大量文件。

阅读更多：HTML 教程

使用FileReader API读取单个文件

首先，让我们看一个使用FileReader API读取单个文件的示例。我们可以使用元素让用户选择一个文件，并将其内容读取到网页中。

<!DOCTYPE html>
<html>
<head>
  <title>读取单个文件示例</title>
</head>
<body>
  <input type="file" id="fileInput" accept=".txt">
  <pre id="fileContent"></pre>

  <script>
    function readFile(file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById("fileContent").textContent = e.target.result;
      };
      reader.readAsText(file);
    }

    var fileInput = document.getElementById("fileInput");
    fileInput.addEventListener("change", function(event) {
      var selectedFile = event.target.files[0];
      readFile(selectedFile);
    });
  </script>
</body>
</html>

上面的示例代码中，我们创建了一个元素，并通过id属性获取到该元素。然后，我们为该元素添加了一个change事件监听器，当用户选择文件时，触发change事件，并传递一个事件对象event作为参数。

在事件处理函数中，我们通过event.target.files[0]获取到用户选择的文件对象。接下来，我们创建一个FileReader对象，并为其设置了一个onload事件处理函数。在这个处理函数中，我们使用e.target.result获取到读取的文件内容，并将其赋值给id为”fileContent”的

pre>元素的textContent属性，从而将文件内容显示在网页上。

逐个读取多个文件

要实现逐个读取多个文件，我们可以对多个文件进行遍历，并逐个进行文件的读取处理。下面是一个逐个读取多个文件的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>逐个读取多个文件示例</title>
</head>
<body>
  <input type="file" id="fileInput" multiple accept=".txt">
  <pre id="fileContent"></pre>

  <script>
    function readFile(file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById("fileContent").textContent += e.target.result + "\n\n";
      };
      reader.readAsText(file);
    }

    var fileInput = document.getElementById("fileInput");
    fileInput.addEventListener("change", function(event) {
      var selectedFiles = event.target.files;
      for (var i = 0; i < selectedFiles.length; i++) {
        readFile(selectedFiles[i]);
      }
    });
  </script>
</body>
</html>