¿Cuál es la mejor manera de reemplazar el botón de exploración de archivos en HTML?

Question

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

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

Answer 1

La mejor manera es hacer que el control de entrada del archivo casi invisible (dándole una opacidad muy baja - no lo hagas "visibilidad:oculto" o "mostrar:ninguno") y colocar absolutamente algo debajo de él - con un índice z.

De esta manera, el control real no será visible y todo lo que coloques debajo se verá.Pero dado que el control está ubicado encima de ese botón, aún capturará los eventos de clic (es por eso que desea usar opacidad, no visibilidad o visualización; los navegadores hacen que no se pueda hacer clic en el elemento si los usa para ocultarlo).

Este artículo profundiza en la técnica.

Answer 2

A los navegadores realmente no les gusta que te metas 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 lo que quieras usar como 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 exploración invisible.

Por ejemplo:

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

Si no le importa usar javascript, puede establecer la opacidad de la entrada del archivo en 0, colocar su control de estilo en la parte superior mediante el índice z y enviar eventos de clic desde su botón a la entrada del archivo.Vea aquí la técnica: http://www.quirksmode.org/dom/inputfile.html

Answer 4

Esto no es técnicamente posible por motivos de seguridad, por lo que no se puede engañar al usuario.

Sin embargo, existen un par de soluciones: eche un vistazo a http://www.quirksmode.org/dom/inputfile.html por ejemplo.

Para que conste, esta pregunta ya ha sido formulada. aquí (donde di la misma respuesta).

Answer 5

Puedes usar un cargador Flash como Subir SWF para hacer esto también.