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：
网奇英文商城外贸系统
下载
网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模
立即学习“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：
- JS 中先检查
input.files.length，防止没选文件 - 限制类型：
if (!file.type.startsWith('image/'))提示仅支持图片 - 限制大小：
if (file.size > 5 * 1024 * 1024)（5MB） - 上传成功后清空 input：
input.value = ''，避免重复选同一文件不触发 change
基本上就这些。File API 不复杂但容易忽略细节，比如文件为空、类型不符、网络中断时的反馈，加上基础校验和提示，体验会好很多。
