How to open a File Dialog or Browse Files Window using Scripts?

Question

I like to show an image or any elements of html and initialize a height to it. When i used a file type of input in html behind of an image like this :

<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">

So input element disappeared and when I clicked on image File Open Dialog opened but it works in a height of a normal input element. when I set a height of 100px to input element it dose not work more than.

When I see that problem of html, I decided to Use Javascript or Jquery to solve problem, I searched an find some similar issues like :

How to open a file / browse dialog using javascript?

but solution is for special browsers and firefox doesn't support it. Is there any other way for open File Browser Dialog by clicking on an image?!

Answer 1

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