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 <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

D-Inventor · Accepted Answer · 2013-09-04 07:30:50Z

5

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>

answered Sep 4, 2013 at 7:30

D-Inventor

811 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Unicron · Accepted Answer · 2010-06-29 19:18:41Z

2

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.

answered Jun 29, 2010 at 19:18

Unicron

7,4761 gold badge28 silver badges19 bronze badges

1 Comment

fawad Over a year ago

Thank you so much it looks like what i want.

Marz · Accepted Answer · 2013-03-14 06:39:56Z

0

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.

answered Mar 14, 2013 at 6:39

Marz

763 bronze badges

Collectives™ on Stack Overflow

Image on Browse and upload file button

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related