Open file dialog box in JavaScript
$("#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');
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">
Here is a nice one
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.