答案：JavaScript通过File API在用户授权下读取本地文件。用户选择文件后，通过input元素或拖拽获取File对象，利用FileReader异步读取内容，支持文本、图片预览等场景，需注意安全限制与大文件分片处理。
JavaScript本身出于安全考虑，不能直接访问用户设备上的文件系统。但通过现代浏览器提供的File API，网页可以在用户主动授权的前提下读取本地文件内容。这在上传文件、预览图片、解析文档等场景中非常实用。掌握File API的关键在于理解其核心接口和事件机制。
获取文件对象
用户需要通过input元素选择文件后，JavaScript才能获得对应的File对象。最常见的方式是监听input的change事件。
创建一个type为file的input元素，可以限制可选文件类型，比如只允许图片或文本文件。当用户选择文件后，event.target.files会返回一个FileList集合，其中每个成员都是一个File实例，继承自Blob，包含文件名、大小、类型和最后修改时间等信息。
示例代码：读取文件内容
要读取文件的实际数据，需使用FileReader对象。它提供异步读取机制，避免阻塞页面。常用方法包括readAsText（读取为字符串）、readAsDataURL（读取为base64编码的URL）、readAsArrayBuffer等。
立即学习“Java免费学习笔记（深入）”；
一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业
FileReader通过onload事件返回结果，读取完成后，event.target.result即为实际内容。
读取文本文件示例：const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
console.log('文件内容:', content);
};
reader.readAsText(file);
预览图片示例：
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result; // data URL
document.body.appendChild(img);
};
reader.readAsDataURL(file);
}
拖拽上传支持
除了input选择，还可以实现拖拽上传功能。监听dragover和drop事件，从event.dataTransfer.files中获取文件列表。
阻止默认行为是关键，否则浏览器会尝试打开文件。drop事件触发后处理方式与input一致，仍使用FileReader读取。
document.addEventListener('dragover', e => e.preventDefault());
document.addEventListener('drop', e => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file) handleFile(file);
});
注意事项
- File API只能读取用户明确选择的文件，无法遍历目录或访问任意路径
- 所有读取操作均为异步，避免大量文件导致页面卡顿
- 大文件读取建议分片处理，可结合slice方法切割Blob
- 注意兼容性，老版本IE不支持File API，需降级方案
