Preview only show first 6 pages with water mark for full document please download
Transcript
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
ReadOnly="true"
// NOTAS: 1.Si están trabajando con asp.NET pueden usar el 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/