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();
});

Answer 2

不幸的是，浏览器不允许在没有点击类型为“ file”的输入标签的情况下触发特定事件的情况下打开浏览文件对话框。有一些方法可以解决此问题，但是它肯定不能在您使用的所有浏览器上都可以工作已经。

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

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