Wywołanie kliknięcia z jquery na ukrytym znaczniku pliku wejściowego

Question

Testuję ten pomysł użycia div na wierzchu niewidocznego <input type="file" />, dzięki czemu mogę wykonać fantazyjny przycisk przesyłania plików. Widziałem trochę kodu, ale było nieco skomplikowane. Myślałem próbować ten pomysł wykorzystania jQuery aby wywołać kliknięcie tagu wejściowego z pojemnika 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(); 
    }) 
}); 

Chociaż kod działa OK na Chrome i IE, nie działa na Safari i ma zabawny problem z Firefoksem: dwa razy uruchamia kliknięcie! Jakiś pomysł, dlaczego tak się dzieje? jQuery ma być wieloplatformowy i jestem zaintrygowany. Oto Fiddle

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

Z góry dziękuję za wszelką pomoc!

Kostas

Answer 1

różnych możliwych rozwiązań, które próbowałem są

• Korzystanie visiblity: hidden; szerokość: 1 piksel; dla elementu wejściowego Plik.

jsfiddle dla niego jest jak postępować http://jsfiddle.net/C4sCs/36/

• Używając tylko CSS zadzwonić kliknij plik wejściowy, a nie przy użyciu jquery w ogóle

  #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/