AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home JavaScript

File Type (extension) Validation with JavaScript

File type validation

Lakshika Mathur by Lakshika Mathur
January 1, 2020
Reading Time: 2 mins read
0
File Type (extension) Validation with JavaScript

File type validation before uploading to the server is obligatory for every file upload in the web application. Therefore, it helps to ensure that the user has selected the correct types of files to upload. Client-side validation is more user-friendly than the server-side. It would be a good idea to validate the file type before uploading. With the help of JavaScript, you can check the selected file extension with easily allowed file extensions. In this tutorial, we will explain to you how to implement file extension validation in JavaScript. Using our file type validation script, you can set a limit for the user to upload only the allowed file types.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Confirmation Before Closing of Tab/Browser using JavaScript

In our sample script, we have validated image files using JavaScript and permits the user to select only .jpeg, .jpg, .gif, and .png type file. If the selected file extension is not matched with the specified types, then it will show the alert message to the user. Else, it will display the chosen image preview under the file input field.

JavaScript Code

The fileValidation() function have the complete file type validation code. This JavaScript feature needs to call for file extension validation.

function fileValidation(){
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}

It is defined in allowedExtensions variable. Therefore, if you want to validate other file types, change the regex with allowed extensions.

HTML Code

On file select, execute the  fileValidation() function. If the allowed file types are selected, then it will show image preview in  imagePreview  div.

<!-- File input field -->
<input type="file" id="file" onchange="return fileValidation()"/>

<!-- Image preview -->
<div id="imagePreview"></div>

SEE ALSO: How to Backup MySQL Database using PHP

Conclusion

Firstly, in our sample script, we have explained to you only the image file type validation. Therefore, you can use this same script for other file types validation. Secondly, you only have to specify the allowed file extensions on allowedExtensions variable in JavaScript code. At last, this script will help to display image preview without upload using JavaScript.

Also, read our previous blog- Send Email via SMTP Server in PHP using PHPMailer

Tags: File Type (extension) ValidationJavaScript
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Confirmation Before Closing of Tab/Browser using JavaScript
JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
496
Create a Digital Clock with Date using JavaScript
JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
182
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
Next Post
How to Generate QR Code with PHP using Google Chart API

How to Generate QR Code with PHP using Google Chart API

How to Create Loader Animation with CSS

How to Create Loader Animation with CSS

Leave a Reply Cancel reply

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

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version