the way it works is that there is a real file selector button but it is hidden.then there is a link such that all its functions are linked with the file selector so when the link is clicked the file selector is clicked and displays you the browse window.this is possible with jquery and some css
the following code may help you,modify it according to your needs
step1. the jquery file
You can either download it or use an api from Jquery.com
step2.the code
<html>
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script> //use an api link to avoid keep on downloading the latest jquery version
<script>
//the script below will load the preview of the image in a div which has an id of image_preview
if (window.FileReader) {
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('image_preview').innerHTML = ['<img class="the_img_prev" src="', e.target.result,'" title="', theFile.name, '">'].join('');
};
})(f);
reader.readAsDataURL(f);
}
} else {
alert('This browser does not support FileReader');
}
//the script will make the link act like a file selector
document.getElementById('files_selector').addEventListener('change', handleFileSelect, false);
</script>
<!-------------the form part---------------->
<form id="image" action="upload.php" method="POST">
<input type="file" id="files_selector" name="image" style="display:none;"><!--the hidden selector-->
<a href="#" class="image_selector" id="image_selector" onclick="document.getElementById('files_selector').click();" /><!--the link that acts as the selector -->
</form>
<div id="image_preview"><!-----the selected image will be previewed in this div---></div>
</html>