JavaScript可通过File API读取用户本地文件实现前端预处理与上传：通过获取FileList，用FileReader或URL.createObjectURL预览校验，FormData配合fetch上传，大文件可分片处理。
JavaScript 通过 File API 可以直接读取用户选择的本地文件，无需刷新页面或依赖后端即可完成前端预处理（如预览、校验、分片），再配合 FormData 和 fetch 或 XMLHttpRequest 将文件上传到服务器。
获取用户选择的文件
通常通过 触发文件选择。用户选中后，input.files 返回一个 FileList 对象，其中每个项都是 File 实例（继承自 Blob）。
- 监听
change事件，避免用click—— 用户取消选择时不会触发change -
input.files[0]是首个文件；支持多选时用multiple属性，遍历input.files -
File对象有name、size、type、lastModified等只读属性，可用于基础校验
前端校验与预处理
在上传前做轻量检查，提升体验并减少无效请求：
- 检查
file.size是否超限（例如限制 5MB：if (file.size > 5 * 1024 * 1024)） - 校验
file.type（如"image/jpeg"）或用file.name.split('.').pop().toLowerCase()判断扩展名 - 图片文件可用
URL.createObjectURL(file)生成临时 URL，赋给 - 文本类文件（如 JSON、CSV）可用
FileReader读取内容：reader.readAsText(file)，然后在load回调中处理
构造上传请求
推荐使用 FormData 包装文件，它会自动设置正确的 Content-Type: multipart/form-data 边界头：
立即学习“Java免费学习笔记（深入）”；
const formData = new FormData();-
formData.append('file', file);—— 键名需与后端约定一致（如avatar、documents[]） - 可追加其他字段：
formData.append('userId', '123'); - 用
fetch('/upload', { method: 'POST', body: formData })发送；注意不要手动设置Content-Type头，否则浏览器会禁用自动边界生成
处理大文件或断点续传（进阶）
对超大文件，可结合 File.slice() 分块上传：
-
file.slice(start, end)返回新的Blob，用于切片（如每片 2MB） - 每片单独上传，携带序号、总片数、文件唯一标识（如
file.lastModified + file.name的哈希） - 后端按序合并，前端可显示整体进度（基于已上传片数 / 总片数）
- 若需断点续传，上传前先向服务端查询已接收哪些片，跳过重复上传
不复杂但容易忽略：上传过程中建议禁用提交按钮、显示加载状态；失败时捕获 fetch 的网络错误和 4xx/5xx 响应，并给出明确提示。
