使用 filereader 读取多个文件

📌 相关文章

📜 使用 filereader 读取多个文件 - Javascript (1)

📅 最后修改于: 2023-12-03 15:36:27.810000 🧑 作者: Mango

使用 filereader 读取多个文件 - Javascript

在 Javascript 中使用 filereader 对象可以实现读取本地文件的功能，但通常的例子只涉及到读取单个文件。如果需要读取多个文件，我们需要采用不同的方法。

使用 input 元素选择多个文件

我们可以使用 input 元素的 multiple 属性，让用户可以一次性选择多个文件：

<input type="file" multiple>

当用户选择了多个文件之后，我们可以通过获取 input 元素的 files 属性获得这些文件对象，然后再利用 filereader 对象将这些文件读取出来。

我们使用一个函数来读取多个文件，函数的代码如下：

function readMultipleFiles(files, callback) {
  var results = [];
  var totalFiles = files.length;
  var totalRead = 0;
  for (var i = 0; i < totalFiles; i++) {
    var reader = new FileReader();
    reader.onload = function(e) {
      results.push(e.target.result);
      totalRead++;
      if (totalRead == totalFiles) {
        callback(results);
      }
    };
    reader.onerror = function() {
      totalRead++;
      if (totalRead == totalFiles) {
        callback(null);
      }
    };
    reader.readAsText(files[i]);
  }
}

这个函数接收一个 files 数组作为参数，每个元素是一个文件对象。它还接收一个回调函数 callback，用于在读取完成后返回结果。

函数中首先定义了一个 results 数组，用于保存读取的结果。然后使用 for 循环遍历每个文件对象，为每个文件对象创建一个 filereader 对象。使用 filereader 对象的 onload 事件处理函数读取文件内容，并将结果存放在 results 数组中。当所有文件读取完成时，调用回调函数返回 results 数组。

如果在读取文件过程中出现错误，我们将调用回调函数返回 null。

使用示例

下面是一个使用示例，它使用上面的函数读取多个文件，并将结果显示在网页上：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Read Multiple Files</title>
</head>
<body>
  <input type="file" multiple>
  <button id="submitBtn">Submit</button>
  <div id="output"></div>
  <script>
    function readMultipleFiles(files, callback) {
      var results = [];
      var totalFiles = files.length;
      var totalRead = 0;
      for (var i = 0; i < totalFiles; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
          results.push(e.target.result);
          totalRead++;
          if (totalRead == totalFiles) {
            callback(results);
          }
        };
        reader.onerror = function() {
          totalRead++;
          if (totalRead == totalFiles) {
            callback(null);
          }
        };
        reader.readAsText(files[i]);
      }
    }
    
    document.getElementById('submitBtn').onclick = function() {
      var files = document.querySelector('input[type=file]').files;
      if (files.length == 0) {
        alert('Please select at least one file.');
        return;
      }
      readMultipleFiles(files, function(results) {
        if (results == null) {
          alert('Unable to read some files.');
          return;
        }
        var outputDiv = document.getElementById('output');
        for (var i = 0; i < results.length; i++) {
          var pre = document.createElement('pre');
          pre.appendChild(document.createTextNode(results[i]));
          outputDiv.appendChild(pre);
        }
      });
    };
  </script>
</body>
</html>

在这个示例中，我们创建了一个 input 元素，让用户可以选择多个文件。我们还创建了一个按钮，在按钮被点击时触发读取文件操作。读取完成后，我们将结果显示在一个 div 元素中。

总结

使用 filereader 对象读取多个文件需要注意一些细节，但方法和读取单个文件差不多。我们可以使用 input 元素让用户选择多个文件，然后再使用 filereader 对象将这些文件读取出来。