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.
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.
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 :
Good luck!