Open file dialog box in JavaScript

Solution 1:

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

for IE add this:

$("#logo").css('filter','alpha(opacity = 0');

Solution 2:

I dont't know why nobody has pointed this out but here's is a way of doing it without any Javascript and it's also compatible with any browser.

EDIT: In Safari, the input gets disabled when hidden with display: none. A better approach would be to use position: fixed; top: -100em.

EDIT 2: A different approach would be to use opacity: 0. The problem is that it can mess with the layout. I added some CSS to the example to illustrate the problem.

label {
    display: inline-block;
    background: #ddd;
    border: 1px outset #ccc;
    border-radius: .3em;
    padding: .3em 1em;
    margin: .5em;
}

label:active {
  border-style: inset;
}

<label>
  Using <code>position: fixed</code>
  <input type="file" style="position: fixed; top: -100%">
</label>

<label>
  Using <code>opacity: 0</code>
  <input type="file" style="opacity: 0">
</label>

If you prefer you can go the "correct way" by using for in the label pointing to the id of the input like this:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Solution 3:

Here is a nice one

Fine Uploader demo

It is an <input type='file' /> control itself. But a div is placed over that and css styles are applied to get that feel. Opacity of the file control is set to 0 so that it appears that the dialog window is opened when clicking on the div.

Open file dialog box in JavaScript

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts