美化input type=“file”的样式

原理：将原来的样式隐藏，然后自己写css和js

html部分：

<div class="file-input">
  <p class="input-container">
    上传图片
    <input type="file" id="upload" accept="image/*" multiple>
  </p>
  <span id="name"></span>
</div>

css样式部分：

.file-input{
  line-height:30px;
  position:relative;
  margin-top:10px;
}
.file-input .input-container{
  width:100px;
  height:30px;
  text-align:center;
  background:#3879d9;
  color:#fff;
  border-radius:3px;
}
.file-input input{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
}
.file-input #name{
  position:absolute;
  left:100px;
  top:0;
  font-size:12px;
  color:#666;
}

js控制部分：

var upload=document.getElementById('upload');
var nameContainer=document.getElementById('name');

upload.οnchange=function(){
  var name=[];
  for(var i=0;i<this.files.length;i++){
    name[i]= this.files[i].name;
    if(this.files[i].size>=307200){
      alert("文件"+this.files[i].name+"过大，不能超过300kb")
      }
  }
  nameContainer.innerHTML=name;
}