Question

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

火狐

铬

Answer 1

如果你想要一致的Button Look-And-Feel ....你将需要应用你希望的样式。

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

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

C＃

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

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

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

3 个答案: