摘要：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>
JS文件：
1 function Check_FilePath() { 2 var FilePath = document.getElementById("FileUp"); 3 var FileNewName = document.getElementById("txtFileName"); 4 if (FilePath.value != '') 5 { 6 FileNewName.value = FilePath.value; 7 } 8 }
aspx.cs文件：
1 //Page_Load事件 2 this.FileUp.Attributes.Add("onchange", "javascript:return Check_FilePath();");
1 //btnUpload_Click事件 2 //当点击btnUpload_Click时,把文件上传到指定路径 3 //需要考虑多浏览器的问题,如果是IE,直接用FileUpload控件的SaveAs功能,会保存一个空文件 4 string strFileName="本地保存文件的路径"; 5 if (HttpContext.Current.Request.Browser.Browser == "IE") 6 { 7 WebClient wClient = new WebClient(); 8 wClient.DownloadFile(this.txtFileName.Text.Trim(), strFileName); 9 } 10 else 11 { 12 this.FileUp.PostedFile.SaveAs(strFileName); 13 }
遗留问题：当IE浏览器安全级别高时，会取不到文件的完整路径，类似于C:\fakepath\TP.jpg，而导致保存不了；
网上的很多解决办法是手动更改IE浏览器的安全级别，我在想是否可以在代码中实现更改IE浏览器的安全级别，研究ing......
希望有解决方案的朋友们可以分享一下：）
如果您看了本篇博客,觉得对您有所收获，请点击右下角的 [推荐]
如果您想转载本博客，请注明出处
如果您对本文有意见或者建议，欢迎留言
感谢您的阅读，请关注我的后续博客
