file美化

原生的<input type="file"> 很丑 直接修改样式又很麻烦 框架的file进行了很多包装处理 有时候其提供的功能并不能满足我们的实际需求

这时我们可以对原生的表单进行伪装达到我们需要的效果

给input添加 position:absolute; opacity: 0;属性 并通过top left属性调整位置 width height 调整大小 使input盖住美化后的<div> 

 opacity: 0;可以将元素变成透明的这样看到的就是美化后的<div> 而点击时却是触发的input

如果点击没有出现效果 原因可能是input被遮罩了 将 z-index属性增大

<div>		
<div>对这个div做美化处处理</div>
    <input type="file" class="opacity-file" name="file"  
        style="position:absolute;top:0px;left: 0px;
                width: 258px;height: 135px;
                opacity: 0;">

</div>

 监听文件的改变并作出响应

$(".opacity-file").on("change",function (e) {
	   var e = e || window.event;
	   //获取 文件 
       //files是一个数组，如果支持多个文件，则需要遍历
	   var f  = e.target.files;
	   if(files.length>0){

         //上次修改时间  
         alert(f[0].lastModifiedDate);  
         //名称  
         alert(f[0].name);  
         //大小 字节  
         alert(f[0].size);  
         //类型  
         alert(f[0].type);  

	   }else{
	    
	   }
	});