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中

回答

相关问题