如何格式化文件上传控件

如何格式化FileUpload控件。 据我所知，尚无直接格式可用于使用CSS格式化FileUpload Control。

我将分享我的想法之一，我将在其中实现并运行良好。 我想以现有应用程序中常见的格式显示按钮，并且我必须创建一个新表单来使用此文件上传控件，并且必须更改控件的外观，以使其与现有的。

我所做的是拍摄并格式化了现有格式化按钮的图像，并将其准确放置在fileupload按钮上。 并且还可以在用户单击时更改图像，使其看起来真实。 请在下面找到代码。

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

我为图像按钮，鼠标悬停，退出和单击使用了不同的图像。 这样它对用户来说就显得活着，而不是像图像。

谢谢

巴拉斯·雷迪vasiReddy

From: https://bytes.com/topic/asp-net/insights/883948-how-format-fileupload-control