JavaScript通过File API获取用户选择的文件对象，再用FormData和fetch（或XMLHttpRequest）上传；支持多选、类型限制、预览读取及进度监控，核心流程为选文件→获取File→校验/处理→上传。
JavaScript 本身不直接上传文件，而是通过 File API 获取用户选择的文件对象，再配合 FormData 和 fetch（或 XMLHttpRequest）将文件发送到服务器。关键在于：它不操作磁盘，只读取浏览器中用户授权选中的文件内容。
如何获取用户选择的文件
用户通过 选择文件后，JavaScript 可以从其 files 属性拿到一个 FileList 对象——它是类数组，每个元素都是 File 实例（继承自 Blob）。
- 支持多选时加
multiple属性： - 可限制类型：
accept="image/*,.pdf" -
files[0]就是第一个选中的文件，含name、size、type、lastModified等只读属性
如何预览或读取文件内容（前端处理）
如果想在上传前显示图片、解析文本或校验大小，用 FileReader：
-
reader.readAsDataURL(file)→ 转成 base64（适合小图预览） -
reader.readAsText(file)→ 读文本文件（如 .txt、.json） -
reader.readAsArrayBuffer(file)→ 读二进制（适合音频、加密等） - 监听
load事件获取结果：reader.result
注意：FileReader 是异步的，不能直接 return 结果；大文件慎用 dataURL，容易卡顿或内存溢出。
如何上传文件到服务器
最常用方式是构造 FormData，把文件 append 进去，再用 fetch 发送：
const formData = new FormData();-
formData.append('upload', file);（键名需与后端约定，如upload或file） fetch('/api/upload', { method: 'POST', body: formData })
注意：FormData 自动设置合适的 Content-Type（带 boundary），所以不要手动设 headers: {'Content-，否则会出错。
Type': '...'}
如何监控上传进度
使用 fetch 时无法直接监听进度，推荐改用 XMLHttpRequest：
- 创建
xhr = new XMLHttpRequest() - 监听
xhr.upload.onprogress = e => { console.log(e.loaded / e.total) } - 然后调用
xhr.open('POST', '/api/upload')，再xhr.send(formData)
现代项目也可用 ReadableStream + fetch 分块上传，但复杂度高，一般用于大文件断点续传。
基本上就这些。核心逻辑很清晰：选文件 → 拿到 File 对象 → 按需读取或校验 → 包进 FormData → 发请求。不复杂但容易忽略细节，比如没处理空文件、没关掉重复提交、没做 size/type 校验。
