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.