美化文件上传控件-优快云博客

本文介绍了一种在不牺牲文件上传功能的前提下，通过隐藏原始的<input type="file"/>标签并使用自定义元素来改善用户体验的方法。此外，还探讨了不同浏览器之间的兼容性问题及解决方案。

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让

<input type="file" />隐藏，点其他的标签（图片等）来实现选择文件上传功能。

<div> 
    <div class="_box">选择图片</div> 
</div> 
<div class="none"> 
    <input type="file" name="_f" id="_f" /> 
</div> 
<script type="text/javascript"> 
   $(function () { 
      $("._box").click(function(){ 
	 $("#_f").click(); 
      }); 
   }); 
</script>

但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件，一些低版本的浏览器压根就获取不到Request.Files

<script type="text/javascript"> 
   jQuery(function () { 
      $("._box").click(function () { 
        return $("#_f").click(); 
     }); 
   }); 
</script>

加了一个return关键字，兼容性提高了不少，但是有的浏览器还是不好用。我们发现只有手动点击<input type="file" />后台就一定能获取到要上传的文件，于是我们可以透明<input type="file" />

<div class="_box"> 
    <input type="file" name="_f" id="_f" /> 
       选择图片 
    </div> 
<style>
  ._box input { 
      position: absolute; 
      width: 119px; 
      height: 40px; 
      line-height: 40px; 
      font-size: 23px; 
      opacity: 0; 
      filter: "alpha(opacity=0)"; 
      filter: alpha(opacity=0); 
      -moz-opacity: 0; 
      left: -5px; 
      top: -2px; 
      cursor: pointer; 
      z-index: 2; 
  } 
</style>