JavaScript无法直接读写本地文件系统，仅能通过File API操作用户主动选择的文件；需用input[type="file"]获取File对象，再通过FileReader异步读取内容，注意兼容性与大文件处理。
JavaScript 本身不能直接读写本地文件系统（出于安全限制），File API 提供的是对用户**主动选择的文件**进行读取和操作的能力，不是“任意文件读写”。它不支持写入磁盘、不支持遍历目录、也不能绕过用户授权访问文件。
怎么用 input[type="file"] 获取文件对象
这是所有操作的起点。用户必须通过交互（如点击上传按钮）触发文件选择，JS 才能拿到 File 对象。
-
File是Blob的子类，所以可直接用Blob方法（如slice()、arrayBuffer()） -
event.target.files返回的是FileList，类似数组但不是 Array，需用[0]或展开操作获取单个File - 多选时记得加
multiple属性，否则只返回第一个文件
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', (e) => {
const file = e.target.files[0]; // 用户选中的第一个文件
if (!file) return;
console.log(file.name, file.size, file.type); // name 是原始文件名，size 单位字节，type 是 MIME 类型（可能为空）
});
</script>
用 FileReader 读取文件内容
FileReader 是异步读取的核心接口，支持转成文本、DataURL、ArrayBuffer。注意：它不能取消，也不支持进度回调（除非手动切片 + 循环读）。
阿拉丁·Excel 图表生成器
下载
Excel 数据可视化图表生成器 - 把 Excel/表格数据一键转为柱状图、折线图、饼图、雷达图、堆叠柱状图、散点图、面积图、环形图、气泡图、极坐标图、水平柱状图、柱+线组合双轴图。支持数据透视后绘图(--pivot),输出交互式 HTML(可悬停查看数值、一键下载 PNG)与静态 PNG(可嵌入文档/PPT)。提供两套配色方案: cn-stock(涨红跌绿, 金融财报默认) 与 vibrant(明亮风格, 适合演示报告)。当用户提到数据可视化、画图、图表、走势图、占比图、趋势图、对比图、透视表、Exc
-
readAsText(file, encoding)：适合纯文本（如 JSON、CSV）。编码默认UTF-8，中文乱码常因未指定或后端编码不一致 -
readAsDataURL(file)：生成 base64 字符串，适合预览图片，但大文件会撑爆内存 -
readAsArrayBuffer(file)：适合二进制处理（如解析 Excel、音频分析），后续可用Uint8Array操作 - 必须监听
onload（成功）和onerror（失败），onloadend不区分成败
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 根据 readAsXxx 方法不同，result 类型不同
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
reader.readAsText(file, 'UTF-8');
常见错误和兼容性注意点
看似简单，但实际开发中容易卡在几个地方：
立即学习“Java免费学习笔记（深入）”；
- 直接对
File调用.text()或.arrayBuffer()？那是Blob的新方法（Chrome 76+、Firefox 69+），不是所有环境都支持；老环境必须用FileReader - 想读大文件（>500MB）？
FileReader会吃光内存，应改用stream()+ReadableStream分块读（但目前仅 Chromium 稳定支持） - 上传前校验文件类型？别只信
file.type，它来自扩展名，可被伪造；真要校验得读文件头（如用slice(0, 4)+arrayBuffer()检查 magic bytes） - 移动端 iOS Safari 对某些 MIME 类型（如
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet）识别不准，file.type可能为空字符串
真正难的不是调 API，而是处理用户选了 2GB 视频却想预览缩略图、或上传前做 CRC 校验这类需求——这时候得结合 File.slice()、Web Workers 和流式解析，而不是幻想一个 readFileSync 式的同步调用。
