摘要: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......
希望有解決方案的朋友們可以分享一下:)