0

How can I improve the following so it works in multiple browsers?

$('#img').click(function() {
     $('input[type=file]').click();
});

So when I click an image it will allow to select a file to upload. On the css I did the following:

input[type="file"]{display:none;}

Tried it on safari 5.1.2 & opera 11.61 and it did not work.... Test it on firefox and ie8 and it worked...

Ben
  • 51,770
  • 36
  • 127
  • 149
Rick Rhodes
  • 151
  • 1
  • 11
  • 1
    This might provide some help: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input – joar Mar 20 '12 at 21:21
  • inputs with `display:none` may be not handled as common ones and are not submitted by the default form submit. Try using something like `opacity:1%` or wrapper with `overflow:hidden` or overlapping. – kirilloid Mar 20 '12 at 21:47
  • do you try with trigger? – ZiTAL Mar 20 '12 at 22:28

1 Answers1

0

You can't do this with inputs type file in a x-browser compatible way.

Quirksmode, as always, has a lot to say about this topic:

http://www.quirksmode.org/dom/inputfile.html

Andreas
  • 1,622
  • 14
  • 13