By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,913 Members | 1,356 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

How to format fileupload control

100+
P: 111
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:
Expand|Select|Wrap|Line Numbers
  1. <link rel='StyleSheet' href="Styles/UploadButton.css" type='text/css'/>  
  2.  
  3.  <div class="fileinputs">
  4.         <asp:FileUpload type="file" ID="ctlFileUpload" runat="server" class="UploadButton" EnableTheming="true"/>
  5.         <div class="fakefile">
  6.            <img src="http://bytes.com/images/Browse.jpg" onclick="OpenFileUpload();" class="DirectUploadImage" alt="Select file to upload."
  7.             onmouseover="FileUploadHighlightOn(this);" onmouseout="FileUploadHighlightOff(this);" onmousedown="FileUploadClick(this);"/>
  8.         </div>
  9.     </div>
  10.  
  11.  
  12. <script type="text/javascript" language="Javascript">
  13.  
  14.   function OpenFileUpload() {
  15.             var ctlFileUpload = document.getElementById("ctlFileUpload");
  16.             ctlFileUpload.click(); 
  17.         }    
  18.  
  19.  
  20.  
  21.  
  22. //These functions are used to change the image when the user points on the image.
  23. function FileUploadHighlightOn(element)
  24.     {
  25.          element.src = "http://bytes.com/images/BrowseOver.jpg";
  26.     }
  27.  
  28.     function FileUploadHighlightOff(element)
  29.     {
  30.         element.src = "http://bytes.com/images/Browse.jpg";
  31.     }
  32.  
  33.     function FileUploadClick(element) {
  34.         element.src = "http://bytes.com/images/BrowseClick.jpg";
  35.     }   
  36.  
  37. </script>
  38.  
UploadButton.css
Expand|Select|Wrap|Line Numbers
  1. .UploadButton
  2. {   font-size: 8pt;    
  3.     font-family: Arial;  
  4.     }
  5.  
  6. div.fileinputs {
  7.     position: relative;
  8. }
  9.  
  10. div.fakefile {
  11.     position: absolute;
  12.     top: 0px;
  13.     left: 132px;
  14.     z-index: 1;
  15. }
  16.  
  17. input.file {
  18.     position: relative;
  19.     text-align: right;
  20.     -moz-opacity:0 ;
  21.     filter:alpha(opacity: 0);
  22.     opacity: 0;
  23.     z-index: 2;
  24. }
  25.  
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
Mar 22 '10 #1
Share this Article
Share on Google+