JavaScript无法直接访问本地文件系统，需用户通过<input type="file">选择文件；先用FileReader异步读取内容（如readAsText），再用FormData+fetch上传原始File对象。
JavaScript 本身不能直接访问本地文件系统（出于安全限制），但可以通过用户主动选择文件（如 <input type="file">）来读取其内容，再上传到服务器。整个流程分两步：**读取文件内容**（前端）和**上传文件**（前端发请求）。下面分别说明核心实现方式。
如何用 FileReader 读取文件内容
FileReader 是浏览器内置 API，用于异步读取用户选中的文件内容（文本、二进制等）。它不发送网络请求，只在前端解析文件。
- 监听
input[type="file"]的change事件，获取event.target.files[0] - 创建
new FileReader()实例 - 通过
readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法加载文件 - 在
onload回调中获取结果：reader.result
示例（读取文本文件）：
<input type="file" id="fileInput"><pre id="output"></pre>
const fileInput = document.getElementById('fileInput');
const output = document.getElementById('output');
fileInput.addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
output.textContent = reader.result; // 文件文本内容
};
reader.readAsText(file, 'UTF-8'); // 指定编码避免乱码
});
如何上传文件（不刷新页面）
读取不是必须的——如果只是上传，可直接用 FormData + fetch 或 XMLHttpRequest 发送原始 File 对象。
立即学习“Java免费学习笔记（深入）”；
-
FormData可自动处理 multipart/form-data 编码，无需手动构造请求体 - 将
File对象 append 进FormData，键名需与后端约定（如"file"） - 用
fetch提交，服务端接收该字段即可
示例（上传文件）：
const file = fileInput.files[0];if (!file) return;
const formData = new FormData();
formData.append('file', file); // 后端通过 req.file 或 request.files.file 获取
fetch('/upload', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));
读取并上传的常见组合场景
有些需求需要先读取校验（如检查 CSV 格式、JSON 是否合法、图片尺寸），再上传；或读取后生成缩略图、计算哈希等。
- 先用
FileReader读取为ArrayBuffer，做前端校验或预处理 - 校验通过后，仍可用原
File对象上传（不用转成 Blob 再传，避免重复内存占用） - 若需修改内容（如压缩图片），可用
canvas或第三方库生成新Blob，再 append 到FormData
注意：File 是 Blob 的子类，所以可直接当 Blob 使用；上传时推荐传原始 File，保留文件名和类型信息。
注意事项与兼容性
FileReader 和 FormData 在现代浏览器中支持良好（Chrome 7+、Firefox 4+、Edge 12+、Safari 6.1+）。需注意：
- 大文件读取可能阻塞主线程（建议用
readAsArrayBuffer+ 流式处理或分块） - 移动端需注意
accept属性过滤类型（如accept="image/*"）提升体验 - 上传时建议添加
onprogress监听（XMLHttpRequest.upload.onprogress）或使用fetch配合ReadableStream（较新）显示进度 - 服务端需配置好文件大小限制、MIME 类型白名单、临时存储路径等
