Provide the Same Look and Feel in All Browsers: ASP.NET File Upload Control

Every ASP.NET developer must use ASP.NET File Upload Control. The problem with this control is that it is rendered differently across different browsers. In this post, we’ll show you the fix so that it will have the same look and feel in all browsers.

 

In your ASPX file, just copy the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploader Demo</title>
    <script language="javascript" type="text/javascript">
        function hookFileClick() {
            // Initiate the File Upload Click Event
            document.getElementById('fileUploader').click();
            // After selecting the file get the Selected File Name
            document.getElementById('fileUploader').onchange = function () {
                document.getElementById("txtUploadFile").value = this.value;
            };
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" runat="server" id="txtUploadFile" />
            <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;" />
        </div>
    </form>
</body>
</html>  

Then use this code to save the file into the server:
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
 { 
      string strFileName = fileUploader.FileName; 
      fileUploader.SaveAs("d:\\Somepath\\ " + strFileName); 
 }

Read the rest of the post here: http://www.codeproject.com/Tips/767458/ASP-Net-File-Upload-Control-Provide-same-Look-and

Leave a Reply

Your email address will not be published. Required fields are marked *