Running using jquery using a hidden input file tag
I am testing this idea of using a div on top of the invisible <input type="file" /> , so I can make the download button fancy file. I saw some code around, but was somewhat complicated. I thought about trying to use this idea of using jQuery to trigger a click on an input tag from my div container
Html:
<div id="container"> Click Me! <input type="file" id="file" /> </div> JavaScript:
$(document).ready( function() { $('#container').click( function() { $('#file')[0].click(); }) }); Although the code works in Chrome and IE, it does not run in Safari, and it has a funny problem with Firefox: it double-clicks! Any idea why this is so? jQuery is supposed to be cross-platform and I'm puzzled. Here is the fiddle
http://jsfiddle.net/kostasd/C4sCs/1/
Thanks in advance for your help!
Costas
The various possible solutions that I have tried are
- Using Visiblity: hidden; width: 1px; for the file entry element.
jsfiddle for it, as follows http://jsfiddle.net/C4sCs/36/
Using only Css to invoke file input, click and don't use jquery at all
#container { border:1px solid #b0b0b0; display: inline-block; position:relative; overflow:hidden; cursor:pointer; } #file { position:absolute; top:0; opacity:0; display:block; }