blog post

Validating fields is an important thing while we are using any kind of forms. No matter where you use, we should validate it, in order to make sure that we get accurate values. jQuery helps us to “Write Less Do More” as they says. Today we will see how to implement a simple file upload validation using jquery. Validate File extension before Upload using Regular Expression (Regex) in JavaScript and jQuery. The selected File’s extension will be validated using a Regular Expression and an error message will be displayed when an invalid file is selected.

Regular Expression for allowing Word Document and PDF files only

([a-zA-Z0-9\s_\\.\-:])+(.doc|.docx|.pdf)$

Regular Expression for allowing Image files only

([a-zA-Z0-9\s_\\.\-:])+(.png|.jpg|.gif)$

Regular Expression for allowing Text files only

([a-zA-Z0-9\s_\\.\-:])+(.txt)$

Regular Expression for allowing Excel files only

([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$
The JavaScript Array is then converted into a String separated by Pipe (|) character and is used in the Regular Expression for validating the HTML FileUpload element value. If the selected File is an invalid file, then an error message is displayed and the function returns false, which prevents the Form from getting submitted.

Source Code

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<title>File Upload Validation : </title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="keywords">
<meta name="author" content="Atul Shukla">

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
  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>


<body style="text-align:center">

<h2>File Upload Validation:</h2>

Browser File: <input id="fileUpload" type="file" onchange="return ValidateExtension()" />
<br />
<span id="lblError" style="color: red;"></span>


</body>

<html>

</html>

Validate File extension before Upload using Regular Expression
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Comments (1)

  • Rodrigue

    Saturday, 11 June, 2016 07:58 AM

    Thank you

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information