纯前端文件上传必须基于input type="file"，所有美化和交互都需围绕它展开；css定制受限，需用opacity:0隐藏后绑定click；enctype="multipart/form-data"不可缺失；拖拽上传需调用原生控件；accept和前端校验仅为提示，真正校验须在js读文件头和后端二进制解析。
纯前端能做的只是选文件+发请求，input type="file 是唯一合法入口，所有“美化”“拖拽”“进度条”都得围绕它展开，而不是绕过它。
为什么 input type="file" 不能直接用 CSS 深度定制
浏览器对 input type="file" 的样式控制极弱：默认按钮和文本框是绑定的，::file-selector-button 仅在 Chrome 98+ 有基本支持，Safari 和旧版 Firefox 几乎不响应。强行用 opacity: 0 或 position: absolute 盖住原生控件，再套个自定义按钮，才是实际可行的方案。
- 别写
input[type="file"] { width: 200px; border: 1px solid #ccc; }—— 大部分样式会被忽略 - 隐藏后必须保留
click()触发逻辑，否则用户点不动 -
label[for="xxx"]可以点击触发，但 label 本身不能监听change事件，仍要靠 input 绑定
enctype="multipart/form-data" 缺失会导致后端收不到文件
表单提交时若漏掉这个属性，浏览器会把文件名当普通字符串发过去，后端 request.files 为空，只在 request.form 里看到一个文件名字符串。这是后端收不到文件最常见原因，且错误无提示。
- 只设
method="POST"不够，enctype是独立必需项 - 用
fetch+FormData时不用手动设Content-Type，设了反而破坏 boundary 自动注入 - Node.js Express 必须配
multer，Flask 要用request.files.get('file')而不是request.form
拖拽上传不是替代，而是增强 input type="file"
拖拽区本质是个视觉层，内部仍要调用 input.files = dataTransfer.files 或触发 input.click()，不能脱离原生控件单独工作。否则 iOS Safari 会拒绝访问文件对象，或返回空 FileList。
- 必须监听
dragover并调用e.preventDefault()，否则 drop 不生效 -
drop事件里的e.dataTransfer.files和input.files是同一类型，可直接赋值或遍历 - 多文件场景下，
input.files是只读FileList，需用Array.from()转数组才能map或filter - 文件夹上传（
webkitdirectory）仅 Chrome/Safari 支持，且返回的是扁平列表，无目录结构信息
accept 和前端校验都是提示，不是防线
accept=".pdf,.docx" 只影响文件选择器界面的过滤项，用户切到“所有文件”就能绕过；file.type 可被伪造，file.name 后缀也可任意改。真正有效的校验只有两个地方：JS 读取文件头（如前 4 字节判断 PNG）、后端解析二进制内容并存到非 Web 可访问路径。
- 前端校验大小用
file.size > 5 * 1024 * 1024，超限立刻input.value = ''重置状态 - 不要依赖
file.type === 'application/pdf'，PDF 文件可能报''或application/octet-stream - 后端必须重命名文件（如 UUID + 原扩展名），禁用用户传来的完整文件名，防止路径遍历
真正的难点不在怎么让界面好看，而在于怎么让 input type="file" 的行为可控、可测、可恢复——比如取消选择后如何清空预览、大文件上传中断后如何不残留临时句柄、多文件并发时如何避免 files 引用错乱。这些细节没处理好，界面再炫也没法上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
