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

user1506098 · Accepted Answer · 2013-01-17 09:57:04Z

1

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

answered Jan 17, 2013 at 9:57

user1506098

335 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luca Simonetti · Accepted Answer · 2013-01-17 08:54:37Z

0

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.

answered Jan 17, 2013 at 8:54

Luca Simonetti

1271 silver badge8 bronze badges

Comments

Vasil Nikolov · Accepted Answer · 2013-01-17 10:54:05Z

0

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

edited Jan 17, 2013 at 10:54

answered Jan 17, 2013 at 10:26

Vasil Nikolov

1,12010 silver badges17 bronze badges

Comments

JP de la Torre · Accepted Answer · 2015-01-21 19:45:12Z

0

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.

answered Jan 21, 2015 at 19:45

JP de la Torre

1,78321 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to open a File Dialog or Browse Files Window using Scripts?

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related