Powered By Blogger

Thursday, March 17, 2016

Validate File extension before Upload using Regular Expression in JavaScript and jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <form action="" method="post">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#btnUpload", function () {
            var allowedFiles = [".doc", ".docx", ".pdf"];
            var fileUpload = $("#fileUpload");
            var lblError = $("#lblError");
            var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
            if (!regex.test(fileUpload.val().toLowerCase())) {
                lblError.html("Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.");
                return false;
            }
            lblError.html('');
            return true;
        });
    </script>
    <input id="fileUpload" type="file" />
    <br />
    <span id="lblError" style="color: red;"></span>
    <br />
    <input type="submit" id="btnUpload" value="Upload" />
    </form>
</body>
</html>

No comments:

Post a Comment