JavaScript 的 File API 怎么读取文件内容-js教程-PHP中文网

javascript读取文件必须由用户主动触发，通过获取file对象，再用filereader异步读取；支持readastext、readasdataurl、readasarraybuffer三种方式，需监听onload事件获取结果。

javascript 的 file api 怎么读取文件内容

JavaScript 读取文件内容必须由用户主动触发，不能直接访问本地路径。核心是先拿到 File 对象，再用 FileReader 异步读取。

得先让用户选文件

用 <input type="file"> 是最常用方式。用户点击选择后，event.target.files[0] 就能拿到一个 File 实例（它继承自 Blob，有 name、size、type、lastModified 等属性）。

<input type="file" id="fileInput">

const input = document.getElementById('fileInput');
input.addEventListener('change', (e) => {
  if (!e.target.files.length) return;
  const file = e.target.files[0];
  // 后续读取逻辑放这里
});

用 FileReader 把内容读出来

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

FileReader 是浏览器内置对象，所有读取方法都是异步的，靠监听事件获取结果：

readAsText(file, encoding)：适合 .txt、.json、.csv 等文本文件，默认 UTF-8 编码
readAsDataURL(file)：生成 base64 字符串，适合图片预览（直接赋给 <img src>）
readAsArrayBuffer(file)：读成二进制缓冲区，适合音视频处理、PDF 解析、加密等

每种方法都要监听 onload 才能拿到内容：

const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result); // 内容在这里
};
reader.onerror = () => {
  console.error('读取失败');
};
reader.readAsText(file);

多文件和大文件要注意

多文件：加 multiple 属性，遍历 e.target.files 即可（它是类数组，可用 for...of 或 [...files] 转数组）
大文件：一次性读入可能卡顿，建议监听 onprogress 显示进度，或改用 ReadableStream 分块处理
图片预览更高效的方式是 URL.createObjectURL(file)，比 readAsDataURL 内存占用低，用完记得 revokeObjectURL 释放