file美化

默认效果:

选择文件效果:

 

HTML:

<li><label>上传照片</label>
<div class="fileBg">
<input type="file" class="fileCheckUp">
<span>未选择任何文件添加病情照片患处、检查报告或其他资料</span>
</div>
</li>

CSS:

.fileBg{background:url(images/icon12.png) no-repeat left center;padding-left:80px;position:relative;height:60px;display:flex;align-items:center;}
.fileBg input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}

JS: (需引入jQuery)

$(".fileCheckUp").on("change",function (event) {
  var files  = event.target.files;
  if(files.length>0){ 
    $(".fileBg").find("span").text(files[0].name);

   //修改日期  files[0].lastModifiedDate);  
   //名称  files[0].name 
   //大小字节  files[0].size
   //类型  files[0].type

  }
});