javascript如何进行文件读取操作？_javascript的File API如何使用？-js教程-PHP中文网

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

狼影

发布： 2025-12-16 19:17:46

原创

906人浏览过

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

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

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

获取 File 对象

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

通过 <input type="file"> 标签（推荐）
监听拖放区域的 drop 事件，从 event.dataTransfer.files 中提取

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

使用 FileReader 读取文件内容

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

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

查看详情

立即学习“Java免费学习笔记（深入）”；

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);
});