当前位置:编程学习 > C#/ASP.NET >>

FileUpload控件美化

怎么才能让FileUpload前面的文本框隐藏,而给后面的浏览按钮设置自定义样式呢?希望有高手给予指点! --------------------编程问答--------------------
    <asp:FileUpload ID="FileUpload1" runat="server" style="display:none;" />
    <input id="Button1" type="button" value="button" onclick="document.getElementById('FileUpload1').click();" />
--------------------编程问答-------------------- <form method="post" action="" enctype="multipart/form-data">  
<input type="text" id="txt" name="txt">  
 <input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30" onclick="f.click()">  
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
 
<INPUT TYPE="submit">  
</form>  

--------------------编程问答-------------------- 式样
.FileUpLoad
{
 BORDER-RIGHT: #86A5C2 1px solid; 
 BORDER-TOP: #86A5C2 1px solid;
 FONT-SIZE: 9pt; 
 BORDER-LEFT: #86A5C2 1px solid; 
 CURSOR: hand; 
 COLOR: #000000; 
 BORDER-BOTTOM: #86A5C2 1px solid;
 FONT-STYLE: normal; 
 FONT-FAMILY: "Tahoma", "宋体";
 BACKGROUND-COLOR: #e8f4ff ;
 height:22px;
 width:75px;
 } --------------------编程问答--------------------
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mouseover(function(e){
                e=e||window.event;
                var x = e.pageX;
                var y = e.pageY;
                $("#File1").css({"left":x+"px","top":y+"px","display":"block"})
            })
        })
    </script>

</head>
<body>
    <form id="form1" action="Default2.aspx" method="post" enctype="multipart/form-data">
    <div>
    <div style="position:absolute;filter:alpha(opacity=10);opacity:0.1">
    <input id="File1" name="File1" type="file" style="width:50px;display:none;"/>
    </div>
    <a onclick="selectFile()">选择文件</a>
        <input id="Submit1" type="submit" value="submit" />
    </div>
    </form>
</body>
--------------------编程问答-------------------- a标签可换成你任意想要的图片或什么东东! --------------------编程问答-------------------- 我刚刚试了下,但是为什么没有效果呢? --------------------编程问答--------------------

<!--我测试通过,帮你都换成服务器控件,记得添加jq库,你也可以换成js写,就不用添加jq库-->
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mouseover(function(e){
                e=e||window.event;
                var x = e.pageX;
                var y = e.pageY;
                $("#File1").css({"left":x+"px","top":y+"px","display":"block"})
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div style="position:absolute;filter:alpha(opacity=10);opacity:0.1">
        <asp:FileUpload ID="File1" style="width:50px;display:none;" runat="server" />
    </div>
    <a>选择文件</a>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>
    </form>
</body>

protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write(File1.FileName);
    }
--------------------编程问答-------------------- 美化的方法是采用flash或者Silverlight,其他方法都没有用。浏览器不兼容 --------------------编程问答--------------------
引用 1 楼 koukoujiayi 的回复:
HTML code
    <asp:FileUpload ID="FileUpload1" runat="server" style="display:none;" />
    <input id="Button1" type="button" value="button" onclick="document.getElementById('FileUpload1').click();" ……


一般都这样做。。。。把这个fileupload隐藏掉。。。。通过别的控件的事件来点击这个隐藏的fileupload

那你就可以美化其它控件 了。。。比如文本框。。按钮 --------------------编程问答-------------------- 想美化   还不如   换成 jquery插件等等   插件一般 很漂亮的 --------------------编程问答-------------------- jquery插件可以试试 --------------------编程问答-------------------- http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html --------------------编程问答-------------------- 1楼的和9楼的方法我今天试了试,但是新的问题出来了,在选择好要上传好的文件后,一点击上传按钮它会先将FileUpload前面文本框的值(选择文件的路径)清空了,点击第二下的时候才会进入后台的点击时间,后台当然就获取不到要上传的文件信息了,这是为什么呢? --------------------编程问答-------------------- 问题解决了吗,希望交流一下、、、450670458
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,