JavaScript无法直接读写本地文件系统，只能通过input[type="file"]获取用户主动选择的文件，再用FileReader异步读取内容，且无法获取文件绝对路径。
JavaScript 本身不能直接读写本地文件系统（出于安全限制），File API 不是用于“操作文件”而是用于**在浏览器中安全地访问用户主动选择的文件内容**。它不提供 fs.readFile 那样的后端能力，也不能绕过用户授权去读取任意路径。
如何用 input[type="file"] 获取用户选中的文件
这是所有操作的起点。必须由用户主动触发（如点击上传按钮），不能自动调用 click() 模拟（现代浏览器会拒绝）。
- HTML 中需使用
<input type="file">，推荐加上accept和multiple控制类型和数量 - JS 中监听
change事件，从e.target.files获取FileList对象（类数组，只读） -
FileList里的每个项是File实例，继承自Blob，有name、size、type、lastModified等属性
示例：
<input type="file" id="fileInput" accept="image/*" multiple>
document.getElementById('fileInput').addEventListener('change', e => {
const files = e.target.files; // FileList
for (let i = 0; i < files.length; i++) {
console.log(files[i].name, files[i].size, files[i].type);
}
});
如何读取文件内容：用 FileReader 而不是 fetch
fetch() 无法直接读取本地 File 对象（它需要 URL），必须用 FileReader。它异步读取，支持多种格式输出。
-
readAsText(file, encoding)→ 触发onload，result是字符串 -
readAsDataURL(file)→ 返回 data URL（适合预览图片） -
readAsArrayBuffer(file)→ 返回ArrayBuffer（适合二进制处理、加密、解析结构化数据） - 务必监听
onerror和onloadend，不要只依赖onload（失败时不会触发） - 同一个
FileReader实例只能用一次；重复调用readAs*会报错InvalidStateError
示例（读取文本）：
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 字符串内容
};
reader.onerror = () => {
console.error('读取失败：', reader.error);
};
reader.readAsText(files[0], 'UTF-8');
如何预览图片或生成缩略图
利用 readAsDataURL + <img> 是最轻量的方式，但要注意大文件可能造成内存压力。
立即学习“Java免费学习笔记（深入）”；
- 对大图建议用
createObjectURL(file)（返回临时 blob URL），更高效且可释放 - 用完后应调用
URL.revokeObjectURL(url)避免内存泄漏（尤其在频繁替换预览时） - 需要缩略图？用
<canvas>绘制并压缩：canvas.toBlob(callback, 'image/jpeg', 0.8) -
File对象本身不能被修改（比如改名、改内容），所谓“操作”仅限读取或转成其他格式再上传
示例（安全预览）：
const url = URL.createObjectURL(files[0]); imgEl.src = url; // 后续可清理： imgEl.onload = () => URL.revokeObjectURL(url);
真正容易被忽略的是：你永远拿不到文件的绝对路径（file.path 在浏览器中是空字符串或 undefined），也永远不能跳过用户交互直接访问硬盘。所有“文件操作”都建立在用户明确授权的基础上——这个边界比代码逻辑更重要。
