美化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;

}