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:

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


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

</style><divid="file-image"><inputtype="file"><imgsrc="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
  <inputtype="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.