JavaScript 无法直接读取本地文件，但可通过 File API 和 FormData 配合 fetch 实现安全上传；用 input[type="file"] 获取 File 实例，FileReader 预览小文件，FormData + fetch 上传并支持进度监听，URL.createObjectURL 快速预览，所有操作需用户主动触发。
JavaScript 本身不能直接读取或上传用户本地文件（出于安全限制），但可以通过浏览器提供的 File API 和 FormData 配合 XMLHttpRequest 或 fetch 实现安全、可控的文件上传流程。
如何用 input[type="file"] 获取文件
这是最常用入口。用户选择文件后，input 元素的 files 属性返回一个 FileList 对象（类似数组）：
-
input.files[0]可获取第一个选中文件（File实例） -
File继承自Blob，拥有name、size、type（MIME 类型）、lastModified等属性 - 支持多选时，设置
multiple属性，再遍历files
用 FileReader 预览或读取文件内容
适合小文件（如图片预览、文本解析），不发请求，纯前端处理：
- 创建
new FileReader() - 监听
load事件：读取完成后，reader.result包含结果（base64 或字符串） - 常用方法：
readAsDataURL()（转 base64）、readAsText()（文本）、readAsArrayBuffer()（二进制） - 注意：大文件读取可能阻塞主线程，建议配合
AbortController或分块读取
用 FormData + fetch 实现文件上传
这是现代推荐方式，简洁且支持进度监听：
立即学习“Java免费学习笔记（深入）”；
- 新建
FormData实例，用.append("field", file)添加文件（可附加其他字段） - 调用
fetch(url, { method: 'POST', body: formData })—— 不需设Content-Type，浏览器自动加multipart/form-data边界 - 监听上传进度：通过
upload.onprogress（XMLHttpRequest）或使用ReadableStream+TransformStream（fetch 高级用法，较复杂） - 服务端需解析 multipart 数据（如 Express 中用
multer，Node.js 原生需流式解析）
File API 的其他实用接口
除了基础读写，还有更精细控制能力：
-
URL.createObjectURL(file)：生成临时 blob URL，用于快速预览图片/视频（记得用完调URL.revokeObjectURL()释放内存） -
FileList是只读类数组，不可直接修改；如需过滤或重组，可用Array.from(files)转为数组操作 -
Drag & Drop场景中，从event.dataTransfer.files同样获取FileList - 结合
Streams API可实现分片上传、断点续传（例如每次读取file.stream().getReader()的 chunk）
不复杂但容易忽略：所有文件操作都依赖用户主动触发（如点击、拖入），不能自动读取路径或静默上传。安全边界清晰，功能足够支撑绝大多数上传需求。
