17370845950

JavaScript 文件上传核心是 File API 与 FormData 配合 fetch/XHR：通过 input[type=file] 获取 FileList，用 FileReader 异步读取内容，再以 FormData 提交至后端，并校验类型、大小及错误处理。

文件上传在 JavaScript 中主要靠 File API 和 FormData 配合 fetch 或 XMLHttpRequest 实现，核心是让用户选中文件、读取元数据或内容、再发给后端。

获取用户选择的文件

通过 获取文件列表，files 属性返回 FileList 对象（类似数组）：

• 单文件：用 input.files[0]；多文件需遍历 input.files
• File 是 Blob 的子类，自带 name、size、type、lastModified 等属性
• 监听 change 事件，避免重复提交或未触发

预览图片或读取文件内容

用 FileReader 异步读取文件内容，适合预览、校验或转 Base64：

• readAsDataURL(file) → 得到 data URL，可直接赋给
• readAsText(file, encoding) → 读文本文件（如 JSON、CSV）
• readAsArrayBuffer(file) → 适合二进制处理或大文件分片
• 注意：FileReader 是异步的，用 onload 拿结果，onerror 处理失败

构造请求上传到服务器

推荐用 FormData 包装文件，自动设置 Content-Type: multipart/form-data：

• const fd = new FormData(); fd.append('file', file);
• 支持追加多个同名字段（如多图上传），也支持额外字段：fd.append('desc', '封面图')
• 用 fetch('/upload', { method: 'POST', body: fd }) 发送，无需手动设 header
• 如需进度监听，XMLHttpRequest 的 upload.onprogress 更直观；fetch 需配合 ReadableStream（较复杂）

简单上传示例（含错误处理）

把上面几步串起来，一个最小可用上传逻辑：

• HTML：上传
• JS 中先检查 input.files.length，防止没选文件
• 限制类型：if (!file.type.startsWith('image/')) 提示仅支持图片
• 限制大小：if (file.size > 5 * 1024 * 1024)（5MB）
• 上传成功后清空 input：input.value = ''，避免重复选同一文件不触发 change

基本上就这些。File API 不复杂但容易忽略细节，比如文件为空、类型不符、网络中断时的反馈，加上基础校验和提示，体验会好很多。