Sé que es posible reemplazar el botón Examinar, que se genera en html, cuando usa la etiqueta input con type="file.¿Cuál es la mejor manera de reemplazar el botón de examinar archivos en html?
No estoy seguro de cuál es la mejor manera, así que si alguien tiene experiencia con esto, por favor contribuya.
La mejor manera es hacer que el control de entrada de archivo casi invisible (dándole una muy baja opacidad - no lo haga "visibilidad: oculto" o "display: none") y absolutamente posición algo debajo de él - con un z-index inferior.
De esta manera, el control real no estará visible, y lo que sea que pongas debajo se mostrará a través de. Pero dado que el control se coloca encima de ese botón, seguirá capturando los eventos de clic (esta es la razón por la que desea usar opacidad, no visibilidad o visualización; los navegadores hacen que el elemento no se pueda hacer clic si los usa para ocultarlo).
This article profundiza en la técnica.
Esto no es técnicamente posible por razones de seguridad, por lo que no se puede engañar al usuario.
Sin embargo, hay un par de soluciones: eche un vistazo a http://www.quirksmode.org/dom/inputfile.html para ver un ejemplo.
Para el registro, esta pregunta ya ha sido formulada here (donde di la misma respuesta).
A los navegadores no les gusta mucho que juegues con entradas de archivos, pero es posible hacerlo. He visto un par de técnicas, pero la más simple es colocar absolutamente la entrada del archivo sobre cualquier cosa que quiera usar como un botón, y establecer su opacidad en cero o casi cero. Esto significa que cuando el usuario hace clic en la imagen (o lo que sea que tenga debajo), en realidad está haciendo clic en el botón de navegación invisible.
Por ejemplo:
<input type="file" id="fileInput">
<img src="...">
#fileInput{
position: absolute;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
Si no les importa usar javascript se puede establecer el opasity del archivo-entrada a 0, tire el control de estilo en la parte superior a través de z-index y enviar clickevents desde su botón a la entrada de archivo. Vea aquí la técnica: http://www.quirksmode.org/dom/inputfile.html
Esto parece tan hacky, es una lástima que no haya una Mejor Manera (tm). –