Mediante jQuery tambien podemos modificar el aspecto de los input file, cosa que no podemos hacer simplemente mediante estilos y css. La manera de hacerlo que voy a mostrar es mediante el plugin jQuery filestyle.
Su utilización será muy sencilla: lo primero, como siempre, será incluir las llamadas a los ficheros del framework jQuery y al plugin. A continuación, aplicaremos el plugin a los elementos input file que necesitemos, en este ejemplo lo realizaré sobre la clase inputFile, aunque se podría aplicar a todos los elementos file o a uno simplemente.
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.filestyle.pack.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$(".inputFile").filestyle({
image: "images/btn_examinar.gif", //Ruta de la imagen (botón).
imageheight:24, //Height de la imagen.
imagewidth: 81, //Widht de la imagen.
width: 150 //Tamaño del input.
});
});
</script>
<script language="javascript" type="text/javascript" src="js/jquery.filestyle.pack.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$(".inputFile").filestyle({
image: "images/btn_examinar.gif", //Ruta de la imagen (botón).
imageheight:24, //Height de la imagen.
imagewidth: 81, //Widht de la imagen.
width: 150 //Tamaño del input.
});
});
</script>
Con este código estamos aplicando el plugin a todos los input file con la clase inputFile. Como podemos ver, al plugin se le pueden pasar varios parámetros como la imagen que vamos a utilizar, su tamaño, el tamaño del input, etc.
Luego sólo tendriamos que crear el input file en nuestro formulario con el nombre de la clase inputFile:
<label>Cargar fichero:</label>
<input class="inputFile" type="file" />
<input class="inputFile" type="file" />
A continuación el ejemplo en funcionamiento. En el siguiente enlace puedes descargar el plugin.
da mas justo lo que buscaba je
ResponderEliminardonde puedo bajar ese plugin no lo encuentro por ningun lado
ResponderEliminar