Los navegadores no permiten aplicar estilo a los input file. File Style Plugin resuelve este problema, permitiendo usar una imagen como botón.
Este plugin esta inspirado en un trabajo anterior que realizó Shaun Inman y su uso es realmente sencillo. Basta incluir jQuery File Style:
<script src=¨jquery.js¨ type=¨text/javascript¨></script><script src=¨jquery.filestyle.js¨ type=¨text/javascript¨></script>
y añadir un código similar al siguiente:
$(¨input[type=file]¨).filestyle ({ image: ¨choose-file.gif¨, imageheight : 22, imagewidth : 82, width : 250});
Donde ¨choose-file.gif¨ sería nuestra imagen personalizada y el resto de parámtros tanto las dimensiones de la imagen como las del elemento input.
Descargar
Source:
http://Www.appelsiini.net/download/jquery.filestyle.js
Minified:
http://Www.appelsiini.net/download/jquery.filestyle.mini.js
Packed:
http://Www.appelsiini.net/download/jquery.filestyle.pack.js