Image on Browse and upload file button.

Question

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="uploadpathdiv">
<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 . 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

Answer 1

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.