para - ¿Cuál es la mejor manera de reemplazar el botón de búsqueda de archivos en html?

insertar imagen html url

Question

Sé que es posible reemplazar el botón Examinar, que se genera en html, cuando se utiliza input etiqueta de input con type="file .

No estoy seguro de cuál es la mejor manera, así que si alguien tiene experiencia con esto, por favor contribuya.

Answer 1

La mejor manera es hacer que el control de entrada de archivos sea casi invisible (al otorgarle una opacidad muy baja, no haga " visibility: hidden " o " display: none ") y coloque algo debajo de él, con un índice z más bajo.

De esta forma, el control real no será visible, y lo que sea que pongas debajo se mostrará a través de él. 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).

Este artículo profundiza en la técnica.

Answer 2

Si no le importa usar javascript, puede establecer la opasidad de la entrada de archivo en 0, colocar su control con 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

Answer 3

También puede usar un cargador de Flash como SWFupload para hacer esto.

Answer 4

A los navegadores en realidad no les gusta que juegues con las 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);
}

Answer 5

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: consulte http://www.quirksmode.org/dom/inputfile.html para ver un ejemplo.

Para el registro, esta pregunta ya se ha hecho aquí (donde di la misma respuesta).