Fileupload 在 asp.net 的不同浏览器中以不同的方式呈现答案

【问题标题】：Fileupload is rendering in different way in different browsers in asp.netFileupload 在 asp.net 的不同浏览器中以不同的方式呈现
【发布时间】：2018-01-07 03:29:19
【问题描述】：

FileUpload 控件在不同浏览器中的呈现方式不同。在 Firefox 中，它显示浏览/未选择文件，而在 Chrome 中选择文件/未选择文件。无论浏览器如何，有没有办法以相同的方式显示文件上传。下面附上我的 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" />

火狐

铬

【问题讨论】：

标签： asp.net file-upload webforms

【解决方案1】：

如果您想要一致的按钮外观......您将需要应用您希望的样式。

您正在使用默认浏览器 CSS 样式。检查相关浏览器的开发者工具，了解控件的外观是如何呈现的。

【讨论】：

【解决方案2】：

试试下面的代码：

<!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); 
     }

【讨论】：

【解决方案3】：

非常感谢 @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>

【讨论】：