How to open a File Dialog or Browse Files Window u

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

This might be a couple of years late, but here's is a way of doing it without any Javascript and it's also compatible with any browser.

<label>
  Open file dialog
  <input type="file" style="display: none">
</label>

In case you find problems, you may need to use the for attribute in the label pointing to the id of the input.

Answer 2

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

Answer 3

Unluckily browser don't allow to open the browse file dialog without the specific event triggered by the click on an input tag with type="file" There are some ways to work aorund this, but it won't surely work on every browser you've got.

Answer 4

<style type="text/css">
#file-image {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}


#file-image input {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
}

</style>
<div id="file-image">
    <input type="file">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>