Tutorial : Personalizar input file – parte 2

Hola amigos, les traigo otra manera de personalizar los input file con css y

JavaScript, estos botoncitos que han sido un dolor de cabeza pro años pero ya

no más!!! , en mi anterior entrega de este mismo tema les enseñe una manera

de personalizarlos solo con css hoy lo ampliamos para dar un mejor estilo.

Bueno entonces comencemos:

El resultado final será este :

En el css pondremos:

/*input file*/ .divbotones { position:relative; left:3%; height:auto; width:auto; } .botones1 { position:relative; left:5%; top:0px; height:30px; width:45%; background:#eaeaea; } div.upload { width: auto; height: 25px; background: url(../imagenes/seleccionar_archivo.png) no-repeat; background-size:27%; overflow: hidden; position:relative; top: 2px; left: 4px; } div.upload input { display: block !important; width: 194px !important; height: 112px !important; opacity: 0 !important; overflow: hidden !important; position:relative; top: -33px; left: 2px; margin-bottom: 0px;

}

.texto { background-color:#fcfcfc; color:#c9c9c9; height:19px; width:195px; color:#d8d8d8; position:relative; left:35%; top:-44px; }

.texto { background-color:#fcfcfc; color:#c9c9c9; height:19px; width:195px; color:#d8d8d8; position:relative; left:35%; top:-44px; }

Para el JavaScript

Como verán más adelante el input file tiene un evento que invoca una función

JavaScript que va así:

function nombre_archivo() { var archivo = document.getElementById("FileUpload1"); var label = document.getElementById("Label1"); document.getElementById("Label1").value = document.getElementById("FileUpload1").value; }

Para el HTML

<div class="divbotones"> <div class="botones1"> <div class="upload"> <input type="file" ID="FileUpload1" onChange="nombre_archivo()" CssClass="files" runat="server" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xls,application/vnd.ms-excel" /> </div> <asp:Textbox ID="Label1" runat="server" ReadOnly="true"

CssClass="texto" Text="Archivo" ></asp:Textbox>

</div>

// NOTAS:

1.Si están trabajando con asp.NET pueden usar el <asp:fileupload> que es el

mismo input file y funciona de la misma manera.

2. En el mismo input file cuando le digo accept=".xlsx,application/vnd.openxmlformats-

officedocument.spreadsheetml.sheet,.xls,application/vnd.ms-excel" /> le estoy diciendo que solo me deje escoger archivos de Excel pero ustedes pueden hacer que solo escojan imágenes, música etc.

La imagen que uso es esta es un png

Gracias espero que les haya servido. Si tienen dudas pregunten.

Samanta Cantero.

@zamdd en twitter

Este y más tutoriales : http://titaniumsoluciones.hol.es/