选择文件按钮样式如何美化

报名、上传头像都要选文件，原生 input[type=file] 又灰又长，设计稿对不上。做法是：外面一块像按钮的 .file，里面叠一层透明的 file 控件，点按钮就是点 input。本例只接受 jpg、jpeg、png。

原生选文件框如何藏在按钮下面

外层用，文案写「选择文件」，input 绝对定位铺满这块区域，opacity: 0 看不见，但还能点。overflow: hidden 把撑得很大的 file 裁在按钮里。font-size: 100px 是老办法，让可点热区尽量盖住整颗按钮，尤其照顾旧版 IE。


可点区域都加手型。accept 只能减少误选，真正拦类型还在后面用扩展名再判一次。jQuery 写在业务脚本前面，事件才能用 $。

按钮常态和悬停颜色怎么写

常态浅蓝底、蓝字、浅边；悬停底和边再深一点，字改成 #004974。宽高不要写死，用 padding: 4px 12px 和 line-height: 20px 撑开，文案改成「上传附件」也不会挤扁。

色值按设计稿替换即可。这坑我见过不止一次：按钮写了手型，里面的 input 忘了写，鼠标移到字上是手、移到空白处又变回箭头。

选中后如何显示文件名

change 挂在 body 上委托到 .file input。取 files[0].name 写进旁边的 .showFileName。系统路径在部分浏览器里是 C:\fakepath\xxx.png，不要整段展示，用文件对象的 name 更干净。

同一张图再选一次有时不触发 change，需要的话在处理完后把 this.value 清空。文件名节点和按钮横排，左边距 12px。

文件类型不对时如何提示

扩展名转小写后只放行 jpg、jpeg、png。不过关时清空文件名，显示 .fileerrorTip，并用 layer.msg 再提示一句。jQuery 这套建议用 Layui 做提示，具体按实际项目来定。

没选文件或类型不对时的文案本例是「您未上传文件，或者您上传文件类型有误！」。不要用路径字符串里有没有 jpg 来判断，文件名带这几个字母但不是图时会误放行。

选中的图片如何在页面上预览

类型通过后，用 FileReader 读成 DataURL，赋给 #previewImg 的 src。这是本地预览，还没有传到服务器。


预览图限制最大宽高，避免撑破表单。真正提交时把 input[type=file] 放进 FormData 即可，预览地址不要当服务器路径用。按钮颜色、允许的后缀、提示文案按项目改。