Display (Show) file name after selecting using ASP.Net FileUpload control in JavaScript

Hi nauna,

Refer below code.

HTML

<div>
    <asp:FileUpload ID="FileUpload1" accept=".pdf,.PDF" runat="server" onchange="Filevalidation()" />
    <asp:Label ID="lblError" runat="server" ForeColor="Red" />
    <br />
    <asp:Label ID="lblSelected" runat="server" ForeColor="Green" />
</div>
<script type="text/javascript">
    function Filevalidation() {
        var lblFile = document.getElementById("<%=lblSelected.ClientID %>");
        lblFile.innerHTML = "";
        var lblError = document.getElementById("<%=lblError.ClientID %>");
        lblError.innerHTML = "";
        var fileUpload = document.getElementById("<%=FileUpload1.ClientID %>");
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.value.toLowerCase())) {
            lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
            return false;
        } else {
            lblFile.innerHTML = fileUpload.files[0].name;
        }
    }
</script>

Screenshot