Attivazione del clic con jquery sul tag di input-file nascosto

Question

Sto testando l'idea di utilizzare un div su un invisibile <input type="file" /> così posso creare un pulsante di caricamento file di fantasia. Ho visto qualche codice in giro ma è stato un po 'complicato. Ho pensato di provare questa idea di usare jQuery per innescare lo scatto del tag input dal suo contenitore div

Html:

<div id="container">&nbsp;Click Me!&nbsp; 
    <input type="file" id="file" /> 
</div> 

Javascript:

$(document).ready(function() { 
    $('#container').click(function() { 
     $('#file')[0].click(); 
    }) 
}); 

Anche se il codice viene eseguito OK su Chrome e IE, non funziona su Safari e ha un problema divertente con Firefox: fa scattare il clic due volte! Qualche idea sul perché sia ​​così? jQuery dovrebbe essere multipiattaforma e io sono perplesso. Ecco il violino

http://jsfiddle.net/kostasd/C4sCs/1/

Grazie in anticipo per qualsiasi aiuto!

Kostas

Answer 1

le diverse soluzioni possibili, che ho provato sono

• Usando della visibilità del: hidden; larghezza: 1px; per l'elemento di input File.

Il jsfiddle perché è come seguire http://jsfiddle.net/C4sCs/36/

• Utilizzando solo il Css per richiamare l'input file clicca e non utilizzando jQuery affatto

  #container { 
  border:1px solid #b0b0b0; 
  display: inline-block; 
  position:relative; 
  overflow:hidden; 
  cursor:pointer; 
  } 
  #file { 
  position:absolute; 
  top:0; 
  opacity:0; 
  display:block; 
  } 
  

http://jsfiddle.net/C4sCs/42/