custom browse button

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.

---

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!

---

Yes it's possible, AJAX is not relevant. Code will be:

<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a>

It might not work on certain browsers, quick test that I written worked fine on Chrome 15 (beta), IE9 and Firefox 6 so I guess this covers most of the modern browsers.