透過button 以及 textbox 改寫Fileupload樣式

  • 2747
  • 0
  • JQ
  • 2019-03-20

為了設計給客戶一個美麗的活動網頁,設計部給我了一個很美麗的上傳照片的樣子。

但是完全顛覆了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");
    }

下一篇:使用者希望上傳檔案後會有預覽圖片及刪除按鈕