Question

Is there a way to open file dialog box to upload a file, on click of an button or an image, or an link..

for example :

<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a>
<input type="file" id="fileID" />

I need simpliest example which will work in all browsers. Id like to use pure javascript or ajax.

Answer 1

This is the way I’ve dealt with just HTML & CSS

(And I think it’s not necessary to call any javascript through):

<style>
    span.browse_but { font-family:Arial; width:65px; height:20px; text-align:center; line-height:18px; margin:0px; font-size:10px; font-weight:bold;
                        border:1px solid #ccc; float:left; cursor:pointer; padding:0px; background:#eee; display:block; float:left; overflow:hidden; }
    span.browse_but font { font-size:16px; color:#c00; }
    span.browse_but input { position:absolute; cursor:pointer; right:0px; top:0px; height:20px; width:195px; margin:0px; opacity:0; filter:alpha(opacity=0); }
</style>

<span style="position:relative;" class="browse_but">
    <font style="font-weight:bold; color:#093; position:relative; top:2px; font-size:17px;">+</font> Pick a file
    <input name="F" type="file" value=""/>
</span>

See fiddle here : Deal with ugly browse button

Strategy is to make a file-input with opacity=0 and position:absolute inside a container with position:relative. Thus, the input was invisible to user but when they click the container, the input click event will be triggered as expected.

What you can do to make this fit your own needs :

• Insert the image you want into the container & position it properly;
• Change the size of the file-input & container to fit the image;

Good luck!