Fileupload在不同的瀏覽器中以不同的方式呈現在asp.net中

FileUpload控件在不同的瀏覽器中呈現不同的效果。在Firefox中，在Chrome中顯示瀏覽/未選擇文件選擇文件/未選擇文件。是否有一種方法可以用相同的方式顯示文件上傳，而不管瀏覽器如何。我的ASP.NET代碼和截圖如下附：Fileupload在不同的瀏覽器中以不同的方式呈現在asp.net中

<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label> 
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />&nbsp;         
<asp:Button ID="btnUpload" runat="server" Text="Upload" />

火狐

鉻

來源

2017-07-31 Simant

非常感謝您@GoldBishop給我一些暗示編寫自定義CSS和下面的CSS爲我工作。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 

     <style type="text/css"> 
      .upload-btn-wrapper { 
       position: relative; 
       overflow: hidden; 
       display: inline-block; 
      } 

      .btn { 
       border: 2px solid gray; 
       color: gray; 
       background-color: white; 
       padding: 8px 20px; 
       border-radius: 8px; 
       font-size: 20px; 
       font-weight: bold; 
      } 

      .upload-btn-wrapper input[type=file] { 
       font-size: 100px; 
       position: absolute; 
       left: 0; 
       top: 0; 
       opacity: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div class="upload-btn-wrapper"> 
       <asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label> 
       <asp:FileUpload ID="fileUploader" runat="server" Width="350" />&nbsp;         
       <asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" /> 
      </div> 
     </form> 
    </body> 
    </html>

來源

2017-07-31 15:07:51 Simant

如果你想一致的按鈕在外觀和感覺.. ..你需要運用你所希望的風格。

您正在使用默認瀏覽器CSS樣式。查看關聯瀏覽器的開發人員工具，瞭解如何呈現控件的外觀。

來源

2017-07-31 14:21:50 GoldBishop

試試下面的代碼：

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>Uploader Demo</title> 
     <script src="Scripts/jquery-1.8.2.js"></script> 
     <script language="javascript" type="text/javascript"> 
      function hookFileClick() { 
       // Initiate the File Upload Click Event 
       document.getElementById('fileUploader').click(); 
      } 

      function fnOnChange(obj) 
      { 
       document.getElementById("txtUploadFile").value = obj.value; 
      } 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div> 
       <input type="text" runat="server" 

       id="txtUploadFile" disabled="disabled" /> 
       <input type="button" runat="server" 

       id="btnUpload" value="Browse" 

       onclick="hookFileClick()" /> 
       <asp:Button runat="server" 

       ID="btnUploadFileToServer" 

       Text="Upload File To Server" 

       OnClick="btnUploadFileToServer_Click" /> 
       <asp:FileUpload runat="server" 

       ID="fileUploader" Style="visibility: hidden;" 

       onchange="fnOnChange(this);" /> 
      </div> 
     </form> 
    </body> 
    </html>

C＃

protected void btnUploadFileToServer_Click(object sender, EventArgs e) 
    { 
      string strFileName = fileUploader.FileName; 
      fileUploader.SaveAs("d:\\Somepath\\ " + strFileName); 
    }

來源

2017-07-31 14:45:39 Ravikumar

Fileupload在不同的瀏覽器中以不同的方式呈現在asp.net中

回答

相關問題