文件上传必须使用type="file"，form设enctype="multipart/form-data"且method为POST；name属性必填，多选加multiple，accept仅提示；JS用FormData时键名须与后端一致；服务端需检查文件大小限制和临时目录权限。
file input 必须设 type="file" 才能触发选择文件对话框
浏览器只认 <input type="file"> 为文件上传控件，其他类型（比如 text 或 button）即使加了 accept 或 multiple 也无效。常见错误是漏写 type 属性，或误写成 type="file-upload" 这类自定义值——浏览器会直接降级为普通文本框。
实操建议：
-
name属性必须设置，否则后端收不到字段名（如name="avatar"） - 加
id方便用<label for="xxx">关联，提升可访问性 - 默认只选单个文件，要多选必须显式加
multiple属性 -
accept是提示性过滤（如accept="image/*,.pdf"），不能替代后端校验
表单 enctype 不设为 "multipart/form-data" 就传不了文件
HTML 表单默认用 application/x-www-form-urlencoded 编码，这种格式无法携带二进制文件数据。一旦用了 <input type="file">，就必须把 <form> 的 enctype 改成 "multipart/form-data"，否则文件字段在提交时会被静默丢弃，后端完全收不到。
常见错误现象：表单看起来提交成功，但后端 request.files 为空或报 KeyError。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 检查
<form>标签是否包含enctype="multipart/form-data" - 如果用 JavaScript 提交（如
fetch），不能靠表单自动编码，得手动构造FormData对象 -
method必须为POST（GET不支持文件上传）
用 FormData 提交时，append() 的键名要和后端期待的一致
前端用 JS 控制上传时，常通过 new FormData(formEl) 或手动 append() 构造数据。这里容易出错的是字段名不匹配：比如 HTML 中 <input name="cover">，但 JS 里写成 formData.append("image", file)，后端就收不到 cover 字段。
示例对比：
<form id="upload-form"> <input type="file" name="document" accept=".docx,.pdf"> </form>
正确 JS 写法：
const form = document.getElementById('upload-form');
const formData = new FormData(form); // 自动提取 name="document"
// 或手动：
// const file = form.querySelector('[name="document"]').files[0];
// formData.append("document", file);
注意：files[0] 是 File 对象，不是路径字符串；files 是 FileList，即使没选文件也不会报错，但长度为 0。
服务端接收失败？先确认 maxFileSize 和临时目录权限
前端一切正常，但后端报 “empty file” 或超时，大概率是服务端限制：Node.js 的 multer 默认限制 1MB，Python Flask 的 MAX_CONTENT_LENGTH 默认是 16MB，PHP 的 upload_max_filesize 和 post_max_size 也常卡在 2MB。
另一个隐藏坑是临时上传目录不可写（尤其 Linux 部署时），导致文件根本没落地，后端读到空流。
排查建议：
- 查服务端日志，看是否有
Request Entity Too Large或failed to write file类错误 - PHP 检查
phpinfo()输出中的upload_tmp_dir路径及权限 - Node.js + multer 示例配置：
limits: { fileSize: 50 * 1024 * 1024 }
文件上传链路短但环节多，每个节点都可能静默失败——最常被忽略的是服务端配置，而不是 HTML 写法本身。
