如何在JavaScript中实现多个本地文件的异步加载？

如果你需要实现一个支持多选本地文件并异步读取内容的功能，可以参考下面的完整实现方案：

步骤1：创建多文件选择控件 #

首先在HTML中添加支持多选的文件输入框：

<input type="file" id="files" name="files[]" multiple />

这里的 multiple 属性允许用户同时选择多个文件，name="files[]" 是表单提交时的标准命名方式，方便后端接收文件数组（如果不需要提交表单可以忽略）。

步骤2：编写异步读取的JavaScript逻辑 #

接下来添加事件监听和文件处理代码，实现异步读取每个选中的文件：

// 给文件输入框绑定change事件
document.getElementById('files').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
  const selectedFiles = evt.target.files; // 获取选中的文件列表（FileList对象）
  
  // 遍历所有选中的文件
  for (const file of selectedFiles) {
    const fileReader = new FileReader();
    
    // 文件读取完成后的回调函数
    fileReader.onload = function(event) {
      // 获取读取到的文件内容
      const content = event.target.result;
      // 这里可以根据需求处理内容，比如存入数组、显示到页面或者进行解析
      console.log(`已读取文件 ${file.name}：`, content);
    };
    
    // 以文本格式读取文件（如果是图片等二进制文件，可改用readAsDataURL）
    fileReader.readAsText(file);
  }
}

核心知识点解析 #

• FileList 对象：当用户选择文件后，evt.target.files 返回一个类似数组的 FileList，每个元素是一个 File 对象，包含文件名、大小、类型等元数据。
• FileReader API：这是浏览器提供的异步读取本地文件的核心API，支持多种读取方式：
  • readAsText()：读取文本文件（如.txt、.json等）
  • readAsDataURL()：将文件读取为Base64编码的URL，常用于图片预览
  • readAsArrayBuffer()：读取二进制文件内容，适合处理音频、视频等文件
• 异步处理：FileReader 的读取操作是异步的，不会阻塞主线程，所以必须通过 onload 事件来获取读取结果。

内容的提问来源于stack exchange，提问作者P.W