简历上传那一栏只写了一句请上传附件,没有边框也没有按钮,用户上下滚动两遍还在问到底哪里能上传。乍看像缓存或者权限的锅,追下去往往不是。
<input type='file' id='f' class='sr-only'> <label for='f' class='btn'>选择文件</label> <p class='hint'>支持 PDF 不超过 5MB</p>
追下去是这么回事:input type=file 被直接隐藏,替代的触发元素只是一行普通文字,既没有按钮外观也没有键盘焦点,看不出可点,也没给出任何格式要求的提示。
碰到「文件上传入口」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
具体做法是,用一个真正的按钮元素或者带样式的 label 去触发文件选择;旁边用一行小字写清支持的格式和文件大小上限;选中之后立刻回显文件名,并给出一个删除或重选的入口。
验收就看一点,把页面交给没看过的人,三秒内能找到上传入口并顺利完成一次选择。
