JavaScript 文件上传核心是 File API 与 FormData 配合 fetch/XHR：通过 input[type=file] 获取 FileList，用 FileReader 异步读取内容，再以 FormData 提交至后端，并校验类型、大小及错误处理。
文件上传在 JavaScript 中主要靠 File API 和 FormData 配合 fetch 或 XMLHttpRequest 实现，核心是让用户选中文件、读取元数据或内容、再发给后端。
获取用户选择的文件
通过 <input type="file"> 获取文件列表，files 属性返回 FileList 对象（类似数组）：
- 单文件：用
input.files[0]；多文件需遍历input.files -
File是Blob的子类，自带name、size、type、lastModified等属性 - 监听
change事件，避免重复提交或未触发
预览图片或读取文件内容
用 FileReader 异步读取文件内容，适合预览、校验或转 Base64：
-
readAsDataURL(file)→ 得到 data URL，可直接赋给<img src alt="如何实现文件上传_javascript中文件API如何使用？" > -
readAsText(file, encoding)→ 读文本文件（如 JSON、CSV） -
readAsArrayBuffer(file)→ 适合二进制处理或大文件分片 - 注意：
FileReader是异步的，用onload拿结果，onerror处理失败
构造请求上传到服务器
推荐用 FormData 包装文件，自动设置 Content-Type: multipart/form-data：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
const fd = new FormData(); fd.append('file', file);- 支持追加多个同名字段（如多图上传），也支持额外字段：
fd.append('desc', '封面图') - 用
fetch('/upload', { method: 'POST', body: fd })发送，无需手动设 header - 如需进度监听，
XMLHttpRequest的upload.onprogress更直观；fetch需配合ReadableStream（较复杂）
简单上传示例（含错误处理）
把上面几步串起来，一个最小可用上传逻辑：
- HTML：
<input type="file" id="uploader"><button onclick="upload()">上传</button> - JS 中先检查
input.files.length，防止没选文件 - 限制类型：
if (!file.type.startsWith('image/'))提示仅支持图片 - 限制大小：
if (file.size > 5 * 1024 * 1024)（5MB） - 上传成功后清空 input：
input.value = ''，避免重复选同一文件不触发 change
基本上就这些。File API 不复杂但容易忽略细节，比如文件为空、类型不符、网络中断时的反馈，加上基础校验和提示，体验会好很多。
