FileUpload控件美化
怎么才能让FileUpload前面的文本框隐藏,而给后面的浏览按钮设置自定义样式呢?希望有高手给予指点! --------------------编程问答--------------------<asp:FileUpload ID="FileUpload1" runat="server" style="display:none;" />--------------------编程问答-------------------- <form method="post" action="" enctype="multipart/form-data">
<input id="Button1" type="button" value="button" onclick="document.getElementById('FileUpload1').click();" />
<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">--------------------编程问答-------------------- a标签可换成你任意想要的图片或什么东东! --------------------编程问答-------------------- 我刚刚试了下,但是为什么没有效果呢? --------------------编程问答--------------------
<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>
<!--我测试通过,帮你都换成服务器控件,记得添加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)--------------------编程问答-------------------- 美化的方法是采用flash或者Silverlight,其他方法都没有用。浏览器不兼容 --------------------编程问答--------------------
{
Response.Write(File1.FileName);
}
一般都这样做。。。。把这个fileupload隐藏掉。。。。通过别的控件的事件来点击这个隐藏的fileupload
那你就可以美化其它控件 了。。。比如文本框。。按钮 --------------------编程问答-------------------- 想美化 还不如 换成 jquery插件等等 插件一般 很漂亮的 --------------------编程问答-------------------- jquery插件可以试试 --------------------编程问答-------------------- http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html --------------------编程问答-------------------- 1楼的和9楼的方法我今天试了试,但是新的问题出来了,在选择好要上传好的文件后,一点击上传按钮它会先将FileUpload前面文本框的值(选择文件的路径)清空了,点击第二下的时候才会进入后台的点击时间,后台当然就获取不到要上传的文件信息了,这是为什么呢? --------------------编程问答-------------------- 问题解决了吗,希望交流一下、、、450670458
补充:.NET技术 , ASP.NET