javascript如何进行文件读取操作？_javascript的File API如何使用？

狼影 2025-12-16 00:00:00 次阅读

JavaScript无法直接读取本地文件，需用户主动选择文件后通过File API（如或拖放事件获取File对象，再用FileReader异步读取）。

JavaScript 本身不能直接读取本地文件系统中的任意文件（出于安全限制），但可以通过用户主动选择文件后，利用 File API 在浏览器中读取其内容。核心是结合或拖放事件获取 File 对象，再用 FileReader 进行异步读取。

获取 File 对象

用户必须主动触发文件选择，常见方式有：

通过标签（推荐）
监听拖放区域的 drop 事件，从 event.dataTransfer.files 中提取

选中后得到的是 FileList，其中每个项都是 File 实例（继承自 Blob）。

使用 FileReader 读取文件内容

FileReader 是浏览器内置构造函数，支持多种读取方式：

readAsText(file, encoding)：读为字符串（默认 UTF-8）
readAsDataURL(file)：转为 base64 数据 URL（适合图片预览）
readAsArrayBuffer(file)：读为二进制缓冲区（适合处理音视频、加密等）
readAsBinaryString(file)（已废弃，不建议用）

所有方法都是异步的，需监听 onload、onerror、onprogress 等事件来响应结果。

简单示例：读取文本文件并显示内容

HTML：

JS：
const input = document.getElementById('fileInput');
const output = document.getElementById('output');
input.addEventListener('change', (e) => {
  if (e.target.files.length === 0) return;
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    output.textContent = reader.result;
  };
  reader.onerror = () => {
    output.textContent = '读取失败';
  };
  reader.readAsText(file);
});