Botón de carga de archivo personalizado

puede dar una opción para seleccionar el archivo de la máquina local y cargarlo más. Pero quería un botón personalizado que permita abrir el file browser dialog y seguir subiendo haciendo clic en el botón personalizado también. Por favor vea abajo el ejemplo . Supongamos

  /* file upload */  /* simple button */ 

A continuación se muestra la jQuery fn y permite que el botón funcione como botón de carga de archivos.

 $(function(){ $('#customized').click(function() { /* cutomized button clicked */ $('#file-upload').click(); /* Now file upload button auto clicked & file browser dialog opens. */ }); }); 

js anterior funciona en la máquina de Windows mientras it doesn't work on Linux, Why? También sé que el sistema operativo no tiene nada que hacer y el navegador es responsable de esto. Por favor ayúdame a resolver este problema
Windows – -> mozila IE chrome : funciona, ver ejemplo

Linux no funciona en ningún navegador

Esto tiene más que ver con la versión del navegador en lugar del sistema operativo o la marca del navegador.

Creo que esto también fallaría en Opera en Windows, ya que algunos navegadores impiden la activación de eventos en una entrada de tipo de archivo.

Podría hacer este viejo truco de CSS en su lugar – http://www.quirksmode.org/dom/inputfile.html

Si no necesita la barra que muestra el nombre del archivo, esto funciona bien 🙂 http://jsfiddle.net/fxfPL/

 .replaced-upload-button { display: inline-block; position:relative; overflow:hidden; /*for looks only*/background: #ddd;padding: 5px; border: 1px solid #3d3d3d; } /*for looks only*/.replaced-upload-button:hover { background: orangered; color: #fff; } .original-upload-button { position: absolute; top:0; left:0; width: 9999%; margin-left: -9899%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */ filter: alpha(opacity=50);/* IE 5-7 */ -moz-opacity: 0.5;/* Netscape */ -khtml-opacity: 0.5;/* Safari 1.x */ opacity: 0.5;/* Good browsers */ } .original-upload-button:hover { cursor: pointer } 

Teniendo el mismo problema también recientemente y vi esta página. Tomas, su respuesta es excelente y funcionó muy bien con un ajuste menor en IE8.

El problema en IE8 es que el texto de exploración del botón de exploración original se superpone con el nuevo creado mediante el reemplazo del botón. Para aquellos que experimentan el mismo problema, puede cambiar la opacidad del botón de carga original a 0:

 .original-upload-button { position: absolute; top:0; left:0; width: 9999%; margin-left: -9899%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */ filter: alpha(opacity=0);/* IE 5-7 */ -moz-opacity: 0;/* Netscape */ -khtml-opacity: 0;/* Safari 1.x */ opacity: 0;/* Good browsers */ } 

Podría usar otro botón que llame al evento de clic del botón de carga de archivos. El botón de carga del archivo original permanecerá oculto. Reutilicé el nombre de la clase de Tomas ‘para el botón de carga del archivo original para ocultarlo.

Creo que esta solución también sería genial si está utilizando controles de servidor (pero tenga en cuenta que debe ajustar el enlace del evento de clic del control de servidor).

http://jsfiddle.net/shiego926/X98yp/

Espero que este código ayude!