Fileupload est rendu de manière différente dans différents navigateurs dans asp.net

Le contrôle FileUpload est rendu différemment dans différents navigateurs. Dans Firefox, il affiche Parcourir/Aucun fichier sélectionné dans Chrome Choisissez Fichier/Aucun fichier sélectionné. Existe-t-il un moyen d'afficher le téléchargement de fichiers de la même manière quel que soit le navigateur? Mon ASP.NET code et captures d'écran sont jointes ci-dessous:Fileupload est rendu de manière différente dans différents navigateurs dans 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" />

Firefox

Chrome

Source

2017-07-31 Simant

Merci @GoldBishop beaucoup de me donner quelques indices pour écrire un fichier CSS personnalisé et le CSS suivant a fonctionné pour moi.

<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>

Source

2017-07-31 15:07:51 Simant

Si vous voulez Look-and-feel Button cohérente .. ..vous devrez appliquer le style que vous souhaitez qu'il soit.

Vous utilisez les styles CSS du navigateur par défaut. Vérifiez vos outils de développement pour le navigateur associé pour voir comment le look-and-Feel des contrôles est rendu.

Source

2017-07-31 14:21:50 GoldBishop

essayer le code suivant:

<!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>

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

Source

2017-07-31 14:45:39 Ravikumar

Fileupload est rendu de manière différente dans différents navigateurs dans asp.net

Répondre

Questions connexes