How to format fileupload control

[bharathreddy]

How to format FileUpload control. As far as I am consurned there is no direct formating available for formating FileUpload Control using css.

I will share one of my ideas where I implemented this and working fine. I wanted to show the button in a formate which is common in an existing application and i had to create a new form where i need to use this fileupload control and I have to change the control look and feel so that it is not different from the existing one.

What I did is I took and image of the existing formated button and placed exactly at the fileupload button. And also changed the image when ever the user clicks so that it looks real. Please find the code below.


Html:

<link rel='StyleSheet' href="Styles/UploadButton.css" type='text/css'/>  
 
 <div class="fileinputs">
        <asp:FileUpload type="file" ID="ctlFileUpload" runat="server" class="UploadButton" EnableTheming="true"/>
        <div class="fakefile">
           <img src="http://bytes.com/images/Browse.jpg" onclick="OpenFileUpload();" class="DirectUploadImage" alt="Select file to upload."
            onmouseover="FileUploadHighlightOn(this);" onmouseout="FileUploadHighlightOff(this);" onmousedown="FileUploadClick(this);"/>
        </div>
    </div>
 
 
<script type="text/javascript" language="Javascript">
 
  function OpenFileUpload() {
            var ctlFileUpload = document.getElementById("ctlFileUpload");
            ctlFileUpload.click(); 
        }    
 
 
 
 
//These functions are used to change the image when the user points on the image.
function FileUploadHighlightOn(element)
    {
         element.src = "http://bytes.com/images/BrowseOver.jpg";
    }
 
    function FileUploadHighlightOff(element)
    {
        element.src = "http://bytes.com/images/Browse.jpg";
    }
 
    function FileUploadClick(element) {
        element.src = "http://bytes.com/images/BrowseClick.jpg";
    }   
 
</script>
 

UploadButton.css

.UploadButton
{   font-size: 8pt;    
    font-family: Arial;  
    }
 
div.fileinputs {
    position: relative;
}
 
div.fakefile {
    position: absolute;
    top: 0px;
    left: 132px;
    z-index: 1;
}
 
input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
 

I used different images for the image button, onmouseover, out and click. So that it appears live for the user, and not like an image.

Thanks
Bharath Reddy vasiReddy