javascript如何操作文件_File API的基本用法是什么

JavaScript无法直接读写本地文件系统，需通过File API在用户主动选择文件后读取内容、获取元信息或配合Blob URL实现预览下载；核心是用户触发与浏览器沙箱内处理。

JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过 File API 在用户主动选择文件后，读取其内容、获取元信息，或配合 Blob URL 实现预览、下载等操作。核心是“用户触发 + 浏览器沙箱内处理”，不是随意访问硬盘。

1. 获取文件对象：通过 input[type="file"] 或拖放

最常用方式是监听文件输入框的 change 事件：

• HTML 中放一个 input 元素：<input type="file" id="fileInput">
• JS 中获取选中的 File 对象（其实是 FileList）：

const input = document.getElementById('fileInput');
input.addEventListener('change', (e) => {
  const file = e.target.files[0]; // File 对象，只读
  if (file) {
    console.log(file.name);     // 文件名
    console.log(file.size);     // 字节数
    console.log(file.type);     // MIME 类型，如 'image/png'
    console.log(file.lastModified); // 时间戳
  }
});

登录后复制

2. 读取文件内容：用 FileReader

FileReader 是异步读取文件内容的核心接口，支持文本、DataURL、ArrayBuffer 等格式：

• 读为文本（适合 txt、json、csv 等）：

const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result); // 字符串内容
};
reader.onerror = () => {
  console.error('读取失败');
};
reader.readAsText(file); // 开始读取

登录后复制

• 读为 base64 Data URL（适合图片预览）：reader.readAsDataURL(file)
• 读为二进制 ArrayBuffer（适合解析音视频、Excel 等）：reader.readAsArrayBuffer(file)

3. 预览图片：结合 Data URL 和

无需上传服务器，就能在页面中即时显示用户选择的图片：

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

标签： javascript excel java html js 前端 json 浏览器 字节 硬盘 后端 csv ai st