FileUploadは、asp.netのさまざまなブラウザで異なる方法でレンダリングしています。

FileUploadコントロールは、さまざまなブラウザで異なるレンダリングを実行しています。 Firefoxでは、Chromeでのブラウズ/非選択のファイルが表示されています。ファイル/ファイルが選択されていませんを選択します。ブラウザに関係なく同じ方法でファイルアップロードを表示する方法はありますか？あなたは一貫性のあるボタンのルック＆フィールをしたい場合は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" />

Firefoxの

クローム

出典

2017-07-31 Simant

私のカスタムCSSと次のCSSを記述するためにいくつかのヒントを与えるために非常に多くの@GoldBishopが私のために働いていただきありがとうございます。

<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

..：私のASP.NETコードとスクリーンショットを下に取り付けられています。あなたが望むスタイルを適用する必要があります。

デフォルトブラウザの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のさまざまなブラウザで異なる方法でレンダリングしています。

答えて

関連する問題