Tutorial : Personalizar input file – parte 2 - Titanium Soluciones

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.openxmlformatsofficedocument.spreadsheetml.sheet,.xls,application/vnd.ms-excel" />
</div>
<asp:Textbox ID="Label1" runat="server"
CssClass="texto" Text="Archivo" ></asp:Textbox>
ReadOnly="true"
</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.openxmlformatsofficedocument.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/