Style the input file with very little code using jQuery

Há bastante tempo que andava à procura de uma forma de costumizar o
input file que como sabemos são impossiveis de estilizar através de
css, pois mudam de browser para browser.


Mas consegui encontrar uma maneira muito simples e com muito pouco
código, aqui vai:

<!--CSS-->
<style>
.file {display:inline; width:250px;}
.contentInputFile {width:82px; height:22px; background: url(images/choose-file.gif) no-repeat right top; display:inline; position:absolute; overflow:hidden;} .contentInputFile input[type=file] {position:relative; height:22px; width:82px; cursor:pointer; opacity:0.0; filter: alpha(opacity=0);}
</style>


<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery-1.5.2.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
     $('input[type=file]').bind("change", function() {
      filename = $('input[class=file]');
      valueInputFile = $('input[type=file]').val();
      if($.browser.safari || $.browser.chrome){
         valueInputFileSplit = valueInputFile.split('fakepath');
         elValue = valueInputFileSplit[1].substring(1);
         filename.val(elValue);
      }else{
         filename.val(valueInputFile);
      }
     });
  })
</script>

<!--HTML-->
<input class="file">
<div class="contentInputFile">
<input name="upload" type="file">
</div>

Funciona em todos os browsers, tive que verificar o safari e o chrome
porque ele no caminho que punha no input era um "C:\fakepah\....." o
que ficaria mal, assim tiro isso e fica igual ao que aparece no
firefox.