摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件

实现思路:用两个Button和TextBox控件来替代FileUpload控件,当点击Button时触发FileUpload控件的点击事件,然后通过JS把FileUpload控件的Value赋给TextBox

代码:

aspx文件:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head id="Head1" runat="server">
 3     <title></title>
 4 </head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <div>
 8         <asp:FileUpload ID="FileUp" runat="server" Style="display:none;width: 180px" />
 9         <asp:TextBox ID="txtFileName" runat="server" MaxLength="100" Width="170px"></asp:TextBox>
10         <asp:Button id="btnBrowse" runat="server" style="width:60px" CssClass="btn" OnClientClick="return ShowBrowse()"
11             Text="Browse" />
12         <asp:Button ID="btnUpload" runat="server" Width="60px" CssClass="btn" OnClick="btnUpload_Click" 
13             Text="Upload" />
14     </div>
15     </form>
16     <script language="javascript" type="text/javascript">
17         function ShowBrowse()  
18         {  
19             var file1=document.getElementById("FileUp");  
20             if(file1)  
21             { 
22                 file1.click();  
23                 var isie = (document.all) ? true : false; //判断是IE内核还是Mozilla 
24                 return isie; //火狐浏览器加return false才会在选择文件后将文件名带回到textbox,IE如果返回false上传时要点击两次按钮才触发
25             }  
26         }   
27     </script>
28 </body>
29 </html>
View Code

相关文章: