JavaScript通过File API可在用户主动选择前提下读取本地文件，但不能直接访问任意路径；需先获取File对象（如input或拖放事件中），再用FileReader异步读取内容。
JavaScript 通过浏览器的 File API 可以在用户主动选择的前提下读取本地文件，**不能直接访问任意路径的文件**（出于安全限制），必须由用户通过 `` 或拖放操作触发。核心是获取 File 对象，再用 FileReader 读取内容。
1. 获取 File 对象：从 input 或拖放事件中提取
用户选择文件后，<input type="file"> 的 files 属性返回一个 FileList，其中每个项都是 File 实例（继承自 Blob）：
- 监听
change事件，检查e.target.files[0] - 支持多选时遍历
e.target.files - 拖放场景下，从
drop事件的e.dataTransfer.files获取
2. 使用 FileReader 异步读取文件内容
FileReader 是唯一标准方式，所有读取方法都异步，避免阻塞主线程。常用方法：
-
readAsText(file, encoding)：读为字符串（默认 UTF-8） -
readAsDataURL(file)：读为 base64 数据 URL（适合图片预览） -
readAsArrayBuffer(file)：读为二进制缓冲区（适合处理音频、PDF 等）
通过监听 onload（成功）、onerror（失败）、onprogress（可选进度）处理结果。注意：result 在 onload 中才可用。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
3. 完整示例：读取文本文件并显示内容
HTML：
<input type="file" id="fileInput">
<pre id="output"></pre>
JavaScript：
const input = document.getElementById('fileInput');
const output = document.getElementById('output');
input.addEventListener('change', e => {
if (!e.target.files.length) return;
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
output.textContent = reader.result;
};
reader.onerror = () => {
output.textContent = '读取失败';
};
reader.readAsText(file);
});
4. 注意事项与常见问题
- 文件路径不可见：浏览器只提供文件名、大小、类型（
file.name,file.size,file.type），没有真实路径 - 大文件需谨慎：
readAsText会将整个文件加载进内存，超大文件建议用Streams API（ReadableStream）分块读取 - 编码问题：若文本非 UTF-8，需显式传入编码（如
readAsText(file, 'GBK')），但兼容性有限，推荐服务端转码或前端用TextDecoder - 安全性：File API 不允许脚本自动触发文件选择，必须用户手势（点击、拖放等）启动
