必须通过用户主动触发的获取File对象，不可脚本自动调起；其files属性返回只读FileList，File继承Blob；读取用FileReader（禁用readAsDataURL处理大文件）；上传用FormData配合fetch；浏览器禁止访问真实路径或本地文件系统。
用 input[type="file"] 获取用户选择的文件对象
浏览器中读取本地文件的前提是用户主动触发选择，不能脚本自动调起。必须通过 元素，且需用户点击操作（如点击、空格键、回车），否则现代浏览器会静默拒绝。
获取到的不是路径字符串，而是 FileList 对象，里面每个项都是 File 实例（继承自 Blob）：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0]; // 用户选中的第一个文件
if (!file) return;
console.log(file.name); // 文件名
console.log(file.size); // 字节数
console.log(file.type); // MIME 类型（可能为空）
});
-
e.target.files是只读的FileList，不可修改或赋值 - 用户取消选择时，
e.target.files.length为0，不会返回null - 多选需加
multiple属性，但 iOS Safari 对该属性支持不稳定 -
file.type不可靠——浏览器仅根据扩展名或头部推测，可被伪造
用 FileReader 读取文件内容（文本/二进制）
FileReader 是唯一标准方式，在主线程解析文件内容。它不发送网络请求，纯前端处理，适合预览、校验、转 Base64 等场景。
注意：大文件（如 >100MB）容易导致内存暴涨甚至页面卡死，应避免直接 readAsDataURL；优先用 readAsArrayBuffer 或流式分块读取。
立即学习“Java免费学习笔记（深入）”；
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result; // 根据 read 方法不同，类型可能是 string / ArrayBuffer
console.log(content);
};
reader.onerror = () => {
console.error('读取失败：', reader.error?.message);
};
// 可选方法：
// reader.readAsText(file, 'UTF-8'); // 返回字符串
// reader.readAsArrayBuffer(file); // 返回 ArrayBuffer
// reader.readAsDataURL(file); // 返回 data:xxx;base64,xxx（慎用！）
- 每次只能处理一个
File，重复调用readAs*会中止前一次操作 -
onload回调中，e.target.result的类型取决于所用的readAs*方法 - 读取二进制内容后，如需转字符串，用
new TextDecoder().decode(arrayBuffer)，别依赖readAsText的编码参数（某些浏览器忽略）
用 FormData + fetch 上传文件到服务器
上传本质是 HTTP POST 请求，把文件作为表单字段发给后端。推荐用 FormData 构造请求体，它能自动设置正确的 Content-Type: multipart/form-data 边界头。
不要手动拼接 multipart 数据，也不要试图把 File 转成 JSON 发送——后端无法解析。
const file = input.files[0];
if (!file) return;
const formData = new FormData();
formData.append('upload', file); // 字段名 'upload' 需与后端约定
formData.append('meta', JSON.stringify({ // 可附加其他字段
filename: file.name,
size: file.size
}));
fetch('/api/upload', {
method: 'POST',
body: formData // 不要设 headers.Content-Type，浏览器会自动设置
})
.then(r => r.json())
.then(console.log)
.catch(console.error);
-
FormData.append()第二个参数可以是File、Blob或字符串；第三个参数可指定文件名（覆盖原始file.name） - 若后端要求字段名带数组语法（如
files[]），直接写成formData.append('files[]', file)即可 - 上传进度监听需用
XMLHttpRequest.upload.onprogress，fetch原生不支持（可用ReadableStream分块读取模拟，但复杂度高）
常见错误和绕不过去的限制
很多“读取本地文件”的需求其实混淆了安全边界。浏览器禁止 JS 直接访问任意路径，这是硬性策略，不是 API 缺失。
- 试图用
fs.readFile或require('fs')—— 这是 Node.js API，在浏览器环境根本不存在 - 用
file://协议打开 HTML 页面后读取同目录文件 —— Chrome/Firefox 默认禁用跨源请求，会报CORS或SecurityError - 用
URL.createObjectURL(file)后再fetch()该 URL —— 这只是内存引用，不是真实路径，且必须在revoke前使用，否则泄漏 - 期望获得用户硬盘上的绝对路径（如
C:\xxx\yyy.jpg）—— 浏览器永远只返回C:\fakepath\yyy.jpg或空字符串，这是隐私保护强制行为
真正需要离线读写本地文件的场景（比如桌面应用），应该用 Electron、Tauri 或 WebKit 的 File System Access API（目前仅 Chromium 支持，且需用户手动授权）。普通网页做不到。
