自定义按钮样式选择文件button“实现”file功能

前端渣渣在用到文件上传的时候，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语法。

• 如果对后端、爬虫等感性趣欢迎关注我的个人公众号交流：bigsai
•