美化上传文件按钮

使用默认的input上传文件按钮，十分难看

按钮本身没有任何样式，右边还显示上传的文件名

有些人使用uploadify，我不否认这个插件功能的强大，但个人认为uploadify的按钮是基于flash的，而flash已经是淘汰的技术，Adobe已经放弃了对它的更新

怎样才能隐藏掉上传按钮右边的文件名，同时美化按钮呢？

使用bootstrap可以做到

首先在网页中加入对bootstrp的引用

<link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

然后是html代码

1 <label class="btn btn-primary btn-sm" style="border-radius: 0">
2       <input type="file" id="btnUpload" name="upload" class="mFileInput" style="left:-9999px;position:absolute;">
3       <span>导入</span>
4 </label>

效果如下图所示