How To Open A File Dialog Or Browse Files Window Using Scripts?

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 : &

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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.