為了設計給客戶一個美麗的活動網頁，設計部給我了一個很美麗的上傳照片的樣子。
但是完全顛覆了fileupload的樣式，搞得我亂七八糟的，終於最後做出來啦~~
先來給各位看一下上傳檔案的設計圖美麗的樣子，
再想想asp.net 裡面的 fileupload樣子
你就會開始覺得天哪~~要怎麼樣才能變成這樣 !! 根本無法變成這樣吧~~
這時候呢~ 死馬也是要當活馬醫，網路google一堆，
發現 原來 原生的fileupload它其實再f12裡面也是一個input file
網路上的解法是利用一種障眼法的感覺，
1. 首先 拉出一個 textbox 以及 button (以上方的圖片就是 + 的圖片)
2. 點擊圖片後 會隨即觸發fileupload
3. 檔案選取成功後，將 fileupload.value 設成 textbox的value，這樣再按submit就可以啦~~
但是好景不常，有發現+建的下方有個位選擇任何檔案以及 選取完後會成現總共選擇了幾個檔案
本來function的程式碼是如下
function BrowseFile(){
document.getElementById("FileUpload1").click();
var size = document.getElementById("FileUpload1").files.length;
document.getElementById("photoTal").innerText = "選擇了" + size + "個檔案";
}
但她會只跑出 size 0 因為它沒有辦法再跑一次這個function 或者說 沒有 postback
試了很久終於找到方法，也就是最終的程式碼。附於下方
<script type="text/javascript">
//单击按钮，就像单击“浏览...”一样作用
function BrowseFile() {
//document.getElementById("FileUpload1").style.display = "inline";
document.getElementById("FileUpload1").click();
}
function photoTotal() {
document.getElementById("txtFileUrl").value = document.getElementById("FileUpload1").value;
var size = document.getElementById("FileUpload1").files.length;
document.getElementById("photoTal").innerText = "選擇了" + size + "個檔案";
}
</script>
<div style="height: 156px">
<asp:Label ID="Label2" runat="server" Text="請選擇檔案" class="control-label" Font-Bold="True" Font-Size="Large" ForeColor="#4D2612" Font-Names="微軟正黑體"></asp:Label>
<br />
<div>
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" class="file" Width="203px" Height="23px" />
<asp:TextBox ID="txtFileUrl" runat="server" Width="196px" Height="16px"></asp:TextBox>
</div>
<div>
<asp:Image ID="Image3" runat="server" Style="margin-left: 70px;" Height="60px" ImageUrl="~/img/ADD.jpg" Width="61px" onclick="BrowseFile()" />
</div>
<div style="margin-top: 10px; width: 120px; margin-left: auto; margin-right: auto; margin-bottom: 0px;">
<asp:Label ID="photoTal" runat="server" Text="未選擇任何檔案" ForeColor="#5C788F" Font-Names="微軟正黑體" Font-Size="Medium"></asp:Label>
</div>
</div>
後端
protected void Page_Load(object sender, EventArgs e)
{
// 单击后呼叫photoTotal，photo中將FileUpload1的路径給值到textbox
this.FileUpload1.Attributes.Add("onchange", "photoTotal()");
//隱藏FileUpload1控件 以及 textBox 主要因為如果直接visible = false 則無法附值
this.FileUpload1.Style.Add("display", "none");
this.txtFileUrl.Style.Add("display", "none");
}
