<input type="file">仅触发文件选择，不自动上传；必须配合表单（enctype="multipart/form-data"）或JavaScript（FileReader+FormData+fetch）实现上传；常见失效因DOM未挂载、ID错误、display:none隐藏、异步调用click、未监听change事件或误读value而非files。
HTML 中 <input type="file"> 的基础用法和常见失效原因
直接写 <input type="file"> 不会自动上传文件，它只负责选择——这是绝大多数人卡住的第一步。必须配合表单提交或 JavaScript 手动读取 + 发送，否则选完就“消失”了。
常见失效现象：change 事件不触发、files 属性为空、控制台报 TypeError: Cannot read property 'files' of null。
- 确保元素已挂载到 DOM，且 JS 在其后执行（或用
DOMContentLoaded包裹） - 检查是否误用了
document.getElementById("xxx")但 ID 拼错，或该元素被重复 ID/动态移除 - 不要在
label或父容器上监听click却忘了加for属性或click()调用，否则无法触发原生选择框
用 FormData + fetch 上传单个/多个文件（推荐现代方案）
绕过表单整页提交，更可控、可加进度、可取消。关键是把 input.files 正确 append 到 FormData ——注意它接收 File 对象，不是路径字符串。
示例（上传多个文件）：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async () => {
const formData = new FormData()
// ✅ 正确：遍历 files 类数组，每个 File 对象直接 append
for (let file of input.files) {
formData.append('files', file) // 后端接收字段名是 'files'
}
try {
const res = await fetch('/upload', {
method: 'POST',
body: formData // ✅ 不要设 Content-Type，让浏览器自动设 multipart/form-data + boundary
})
} catch (err) {
console.error(err)
}
})
- 如果后端要求单个字段名（如
avatar），就用formData.append('avatar', input.files[0]) - 手动设置
headers: {'Content-Type': 'multipart/form-data'}会导致失败——浏览器必须自己生成 boundary -
input.files是FileList，不可直接 JSON.stringify，也不支持扩展运算符（需用Array.from()或for...of）
后端接收时常见的 MIME 类型与文件名丢失问题
前端传的 File 对象自带 name 和 type，但部分后端框架（如 Express + multer）默认不保留原始文件名，或把 type 当作 MIME 校验依据，导致上传成功却存成随机名或被拦截。
- Express + multer 示例：用
storage.filename回调显式返回原始名，避免被重命名 - 若后端收到
type为''（空字符串），通常是浏览器无法识别扩展名（如无后缀文件），此时应依赖文件头（magic bytes）而非扩展名做校验 - 上传压缩包（
.zip）时，某些 CDN 或 WAF 会因安全策略拦截application/zip，可临时改用application/octet-stream测试是否是中间层拦截
大文件上传前必须做的三件事
用户选中 500MB 视频再开始传，失败后重来？体验极差。应在上传前做轻量级预检。
- 用
input.files[0].size做前端大小限制（单位字节），提示“最大支持 100MB”，别等请求发出去才 413 - 用
input.files[0].type做简单 MIME 过滤（如只允许image/*），但注意它可被伪造，仅作第一道提示 - 对超大文件，考虑分片（
slice()+Blob）+ 断点续传，否则单次请求易超时、内存溢出；XMLHttpRequest.upload.onprogress或fetch配合ReadableStream（较新）可监听进度
真正麻烦的从来不是怎么点开选择框，而是用户点了“确定”之后那几十秒里，你有没有告诉 TA 正在发生什么、大概还要多久、失败了能怎么办。
