JavaScript无法直接访问本地文件系统，需通过触发用户选择，利用FileList和FileReader读取文件内容，或用FormData+fetch上传文件；大文件可分片处理，注意安全限制与跨域配置。
JavaScript 本身不能直接访问用户本地文件系统（出于安全限制），但可以通过 <input type="file"> 让用户主动选择文件，然后用 File 和 FileReader API 读取内容，再通过 FormData + fetch 或 XMLHttpRequest 上传到服务器。
如何让用户选择并读取本地文件
核心是监听文件输入框的 change 事件，获取 FileList，再用 FileReader 异步读取：
- 使用
<input type="file" id="fileInput">触发选择（可加multiple、accept属性限制类型） -
event.target.files是一个FileList，每个项是File对象（继承自Blob） - 用
FileReader的readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法读取 - 监听
onload获取结果，onerror处理失败
示例（读取文本文件）：
const input = document.getElementById('fileInput');
input.addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
document.getElementById('output').textContent = reader.result;
};
reader.onerror = () => console.error('读取失败');
reader.readAsText(file, 'UTF-8');
});
立即学习“Java免费学习笔记（深入）”；
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
如何上传文件到服务器
读取不是必须步骤——如果只是上传，可跳过 FileReader，直接把 File 对象塞进 FormData：
-
FormData可以原生携带File或Blob，浏览器自动设置正确的Content-Type和边界（boundary） - 用
fetch发送 POST 请求，body直接传FormData实例（不用设Content-Type头，否则会出错） - 后端需按 multipart/form-data 解析（如 Express 用
multer，Node.js 原生需解析流）
示例（上传单个文件）：
const form = new FormData();form.append('upload', file); // 'upload' 是后端接收字段名
fetch('/api/upload', {
method: 'POST',
body: form
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));
如何处理大文件或分片上传
避免内存溢出和超时，可将大文件切片（Blob.slice()），逐片上传并记录进度：
- 用
file.slice(start, end)获取子Blob（注意：返回的是Blob，不是File，但可直接 append 到 FormData） - 每片带上序号、总片数、文件唯一标识（如 hash），便于后端合并
- 结合
fetch的signal和AbortController支持取消 - 用
XMLHttpRequest.upload.onprogress获取上传进度（fetch目前不原生支持上传进度）
注意事项和常见问题
-
File对象只在用户触发选择后存在，刷新页面即丢失；如需持久化，得靠后端存储或 IndexedDB 缓存内容（非路径） - 不能读取或上传文件的绝对路径（出于隐私保护，
file.path在浏览器中始终为""） - 跨域上传需服务端配置 CORS（如
Access-Control-Allow-Origin），且带凭证时要设credentials: 'include' - 移动端要注意
accept属性对摄像头/相册的调用效果（如accept="image/*"可唤起拍照）
不复杂但容易忽略。
