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

over 8 years ago

0
0
Positive Vote
0
Negative Vote
0
Save Favourite
0
0
0
0
7.93k

Comment on it

Hello Everyone!!

In this blog, we are discussing the uses of the regular expression in the validation a file extension before uploading. Regular expression is a set of the symbol or character or both and it is used in many field but here we are using it for checking the condition. Whenever file is selected for the uploading then the javascript check the file extension and if the file extension is not supported by the regular expression then the error message will appeared. We did it using JavaScript and jQuery.

Regular Expression:- The following expression are validate the file extension.

Regular expression for Word Document and Pdf only ([a-zA-Z0-9\s_\\.\-:])+(.doc|.docx|.pdf)$
Regular expression for image file only:- ([a-zA-Z0-9\s_\\.\-:])+(.png|.jpg|.gif)$
Regular expression for text file:- ([a-zA-Z0-9\s_\\.\-:])+(.txt)$

We are going to use these expression for validating the file extension.

Using JavaScript :-

In this we are using the HTML BUTTON SPAN and file Upload element. The javaScript function will called when the onclick event of the button is occurred. JavaScript array is started converting into the string separated by the pipe(|) character. The output string is used in the validating the file Upload element value.

CODE:-

copytext

form action="" method="post">
<script type="text/javascript">
    function ValidateExtension() {
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = document.getElementById("fileUpload");
        var lblError = document.getElementById("lblError");
        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;
        }
        lblError.innerHTML = "";
        return true;
    }
</script>
<input id="fileUpload" type="file" />
<br />
<span id="lblError" style="color: red;"></span>
<br />
<input type="submit" id="btnUpload" value="Upload" onclick="return ValidateExtension()" />
</form>

form action="" method="post">
<script type="text/javascript">
    function ValidateExtension() {
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = document.getElementById("fileUpload");
        var lblError = document.getElementById("lblError");
        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;
        }
        lblError.innerHTML = "";
        return true;
    }
</script>
<input id="fileUpload" type="file" />
<br />
<span id="lblError" style="color: red;"></span>
<br />
<input type="submit" id="btnUpload" value="Upload" onclick="return ValidateExtension()" />
</form>

Using jQuery:-

It also cover the same process but using jQuery.

CODE:-

copytext


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


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

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

0 Comment(s)

Comment on it

Unable to start Java!! Mr. Nerd figure out why..

Positive Votes

Negative Votes

Delete Comment

Post Projects

Manage Company