C#自定義FileUpload控制元件

annehan發表於2016-05-27
C#控制元件

摘要：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:fakepathTP.jpg，而導致儲存不了；

網上的很多解決辦法是手動更改IE瀏覽器的安全級別，我在想是否可以在程式碼中實現更改IE瀏覽器的安全級別，研究ing……

希望有解決方案的朋友們可以分享一下：）

 

如果您看了本篇部落格,覺得對您有所收穫，請點選右下角的 [推薦]

如果您想轉載本部落格，請註明出處

如果您對本文有意見或者建議，歡迎留言

感謝您的閱讀，請關注我的後續部落格


相關文章