how to trigger file browse when i click on image/button

Question

I would like to trigger browsers file upload window when i click on custom button.Its should show same like below in the image.

Answer 1

Take a look here: Custom file input can't be that hard?

Or you can try something like this:

<div style='width:140px;margin-top:80px;position:relative;'>
    <div style='position:absolute; cursor:pointer; cursor:hand; width:140px; height:20px; background:#3172a0; border-top:solid 1px #a2a2a2; color:#fff;padding-top:4px;' align='center'>Browse...</div>
        <input name='image' type='file' size='5' style='position:absolute; cursor:pointer; cursor:hand; height:25px; opacity:0.01; filter:alpha(opacity=0); top:0px; left:0px;' />
    </div>
</div>