前端渣渣在用到文件上传的时候，html的input file的选择文件样式太丑，更改也很不如意，很想用自定义按钮实现替代，特作笔记
- 在实际代码中，能够实现选择文件的只有file属性，button无法实现选择文件。然而市面上很多选择文件的用button完成视觉效果，实际上就是将file隐藏起来，点击button的时候触发函数点击file属性的文件。如果需要文件名显示出来，那么还需要其他截取字符串和一些鼠标事件的操作函数。
- 环境：jquery，其他自定义样式。
- 应了解知识：button的click()事件，file属性的几大事件：
（1）mousedown
（2）focus
（3）mouseup
（4）click
（5）blur
（6）focus
（7）change
效果图：
html的展示代码：
<div class="layui-upload"> <label id="lb"></label><br> <input type="button" value="选取文件" class="layui-btn layui-btn-normal" onclick="getFile()"> <input style="display: none" type="file" name="file" id="getF" onchange="clickF()"> <button type="submit" class="layui-btn" id="test9">开始上传</button> </div> --- --- <script> function getFile(){ $("#getF").click(); } var filename=""; function clickF() { filename=$("#getF").val(); var filenames=filename.split("\\"); filename=filenames[filenames.length-1]; $("#lb").text(filename); } </script>
看下逻辑，就是点击按钮，函数中实现点击隐藏的file，file的onchange关联一个函数，改变之后将文字显示出来。语法为jquery语法。
