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?!
$('img').click(function() {
$('input[type="file"]').click();
});
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.
<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>
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.