Image on Browse and upload file button

I want to have image button for "browse" and "upload"

I have textbox using the following code:

CSS

   .uploadpathdiv
    {
     margin:0;
     height:44px;
     width:464px;
     background:url('images/img-upload.png') no-repeat bottom;
    }


.uploadpath
{
 background:none;
 border:none;
 width:400px;
 height:40px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

HTML

<div class="uploadpathd开发者_JAVA百科iv">
<input class="uploadpath" name="path" type="text" />
</div>
<img src="/themes/scaccarium/images/button-upload.png" />
<img src="/themes/scaccarium/images/button-browse.png" />

The image code is for both "browse" and "upload" button.

Please help me to correct the above code so that when i press the browse button i get "file selection option" as you see when you use <input type = "file" name="browse">. Secondly, the path of the file must be shown in the textbox above.

Thirdly when i press the upload button the file should be uploaded

If you label an image with the label tag, you can click on the image and it will select the browse button.

<div id="fileInput">
    <label for="FileID"><img src="ImageURL"></label>
    <input type="file" id="FileID"/>
</div>

It is not possible to target the "browse..." button of file upload controls via CSS.

A HTML-based workaround can be found here: Styling an input type="file" not sure whether it can do exactly what you need, but I think that's the closest you can get.

If you want full control over the control (no pun intended) you would have to use a Flash-based uploader like SWFUpload. Note that those uploaders work a bit differently from a normal file upload control, so you may need to change your workflow to get it to work, and decide whether it's worth the effort.

Most of the CSS properties we usually use to style form controls don’t have any effect on the upload control, there are ways to style it, a good example is Here

This technique basically sets the opacity of the control to 0 and placed another "styled" button underneath it. thus when clicking on the style button you are actually clicking the upload control.

I have spent many hours battling with custom file upload controls for clients and have found by far the best approach is making use of Valums jquery file uploader everything is already built and you can customize as much as you want, also has drag and drop functionality.