简历上传必须用隐藏的<input type="file">配合<label>触发，设accept限定后缀、JS校验大小并清空value防重复选；用FormData+fetch上传，后端需解析中间件，返回文件信息并转义输出防XSS。
简历上传按钮必须用 <input type="file">，别手写假按钮
浏览器原生的文件选择控件不可样式化，但强行用 <div> 模拟点击、隐藏真实 input 是唯一可靠方案。手写一个“点击上传”按钮再用 JS 触发 click()，反而比直接暴露 input 更可控。
常见错误是把 input 设为 display: none 后忘了加 id 或没绑定 label[for]，导致点击无响应。正确写法：
<label for="resume-upload" class="upload-btn">选择简历文件</label><br><input type="file" id="resume-upload" accept=".pdf,.doc,.docx" style="display: none;">
-
accept属性必须明确限定后缀，否则用户可能选中图片或压缩包，后端校验失败率飙升 - 不要依赖
accept="application/pdf"这类 MIME 类型——iOS Safari 和部分安卓浏览器根本不认 - 如果用 JS 绑定
change事件，记得检查event.target.files.length是否为 1，空选择会触发但无文件
限制文件大小得前后端一起做，前端 files[0].size 只是第一道筛子
用户选完文件后立刻用 JS 读取 file.size（单位字节），超过阈值就 alert 或提示并清空 input.value。但这只是体验优化，不能替代后端校验。
例如限制 5MB：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('resume-upload').addEventListener('change', function(e) {<br> const file = e.target.files[0];<br> if (file && file.size > 5 * 1024 * 1024) {<br> alert('文件不能超过 5MB');<br> e.target.value = ''; // 清空选择，否则再次选同名文件不会触发 change<br> }<br>});- Chrome/Firefox 返回的
size准确，但某些旧版 Edge 在文件系统缓存未刷新时可能偏差几百 KB - 别用
file.name做后缀判断——用户可手动改后缀绕过accept，必须用file.type+ 服务端二进制头检测双保险 -
e.target.value = ''这步不能省，否则连续选同一个文件，change事件不触发
上传过程要显式反馈，别让表单提交后白屏等 3 秒
用 fetch 或 XMLHttpRequest 替代传统表单提交，才能控制 loading 状态、显示进度条、处理网络中断。
最简可行的上传逻辑（FormData + fetch）：
const input = document.getElementById('resume-upload');<br>input.addEventListener('change', async function(e) {<br> const file = e.target.files[0];<br> if (!file) return;<br><br> const formData = new FormData();<br> formData.append('resume', file);<br><br> try {<br> const res = await fetch('/api/upload', {<br> method: 'POST',<br> body: formData,<br> });<br> if (res.ok) console.log('上传成功');<br> } catch (err) {<br> console.error('上传失败', err);<br> }<br>});- FormData 会自动设置正确的
Content-Type: multipart/form-data; boundary=...，别手动设 headers，否则后端收不到文件 - Node.js Express 需配合
multer，Python Flask 用request.files.get('resume')，PHP 从$_FILES读——关键不是前端，是后端是否配置了文件解析中间件 - 移动端 Safari 对大文件上传容易超时，建议后端返回
206 Partial Content支持断点续传，但小简历项目通常没必要
上传成功后别只弹个“OK”，得给用户可验证的结果
后端返回的响应体里至少包含文件 ID 或访问 URL，前端应把它插入 DOM，比如显示“已上传：张三_简历.pdf（2.1MB）”，并附上预览链接或下载按钮。
更稳妥的做法是后端返回带签名的临时 URL（如 AWS S3 presigned URL），前端用 <a href="..." download> 让用户确认内容无误。
- 千万别把原始文件名直接拼进 HTML，需对
file.name做 HTML 转义（如用textContent赋值而非innerHTML），否则 XSS 风险 - 如果后端返回的是纯文本 ID（如
{"id": "res_abc123"}），前端必须立刻发起 GET 请求获取元信息，否则用户无法确认是否传错文件 - 用户关闭页面前，最好监听
beforeunload提示“文件正在上传，确定离开？”，避免误操作丢失进度
