摘要：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
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......
希望有解決方案的朋友們可以分享一下：）
如果您看了本篇部落格,覺得對您有所收獲，請點選右下角的
[推薦]如果您想轉載本部落格，
請注明出處如果您對本文有意見或者建議，歡迎留言
感謝您的閱讀，請關注我的後續部落格