使用 CSS 让 input[type=file] 上传按钮样式美化

Question

我们在做 input 文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox 美化，input radio 美化是一个道理的，后面文章会总结。

思路：

input file 上传按钮的美化思路是，先把之前的按钮透明度 opacity 设置为 0，然后，外层用 div 包裹，就实现了美化功能。

代码如下：

DOM 结构：

<a href="javascript:;" class="a-upload">
  <input type="file" name="" id="">点击这里上传文件
</a>

<a href="javascript:;" class="file">选择文件
  <input type="file" name="" id="">
</a>

CSS 样式1：

/*a  upload */
.a-upload {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1
}

.a-upload  input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer
}

.a-upload:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none
}

样式2：

.file {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}
.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  background: #AADFFD;
  border-color: #78C3F3;
  color: #004974;
  text-decoration: none;
}

修改后如下：

样式二：

美化后显示文件名

上面美化，把默认显示的文件名也给隐藏掉了，那么如何显示文件名称呢？没关系，我们可以用 jQuery 来获取文件的文件名。

我们可以写个 change 事件

$(".a-upload").on("change","input[type='file']",function(){
  var filePath=$(this).val();
  if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
    $(".fileerrorTip").html("").hide();
    var arr=filePath.split('\\');
    var fileName=arr[arr.length-1];
    $(".showFileName").html(fileName);
  }else{
    $(".showFileName").html("");
    $(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
    return false 
  }
})