Fileupload在asp.net的不同浏览器中以不同的方式呈现_Asp.net_File Upload_Webforms

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

asp.net file-upload

Fileupload在asp.net的不同浏览器中以不同的方式呈现,asp.net,file-upload,webforms,Asp.net,File Upload,Webforms,FileUpload控件在不同浏览器中呈现方式不同。在Firefox中，它显示Browse/No file selected，而在Chrome中则显示Choose file/No file selected。是否有方法以相同的方式显示文件上载，而不考虑浏览器。我的ASP.NET代码和屏幕截图附在下面： <asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label

FileUpload控件在不同浏览器中呈现方式不同。在Firefox中，它显示Browse/No file selected，而在Chrome中则显示Choose file/No file selected。是否有方法以相同的方式显示文件上载，而不考虑浏览器。我的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" />


铬
如果您想要一致的按钮外观和感觉……您需要应用您希望的样式
您正在使用默认的浏览器CSS样式。检查相关浏览器的开发人员工具，查看控件的外观如何呈现。
尝试以下代码：
<!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>   

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


.上传btn包装器{
位置：相对位置；
溢出：隐藏；
显示：内联块；
}
.btn{
边框：2倍纯色灰色；
颜色：灰色；
背景色：白色；
填充：8px 20px；
边界半径：8px；
字体大小：20px；
字体大小：粗体；
}
.upload btn包装器输入[类型=文件]{
字体大小：100px；
位置：绝对位置；
左：0；
排名：0；
不透明度：0；
}

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