How to add custom jquery image validation?

in jquery image validation, There are the Following The simple About jQuery Validate Multiple File Image Upload validation Full Information With Example and source code.

As I will cover this Post with live Working example to develop Single/multiple image validation and upload in PHP, so the jquery multiple file upload with preview for this example is following below.

jquery validate file size before upload

File upload size validation using jQuery with demo

In this bellow example if I simple upload File which check size is greater than 300kb it give a message.

<!DOCTYPE html>
<script src=""></script>
		var file_size = $('#userImgFileLive')[0].files[0].size;
		if(file_size>300000) {
			$("#img_genrated_err").html("<p style='color:#FF0000'>Your File size is greater than 300kb</p>");
			return false;
		return true;
<span id="img_genrated_err"></span>
<input type="file" id="userImgFileLive" name="userImgFileExample1" class="file_upload1">

Example 2: Upload image (JPEG only)

Also Read: jquery validate file type before upload

Step 1: Html Part

<form action="#" method="post" enctype="multipart/form-data">
        <label for="image">Upload image (JPEG only)</label>
        <input type="file" name="image" id="image" />

Step 2: jQuery Part

(function($) {
    $.fn.checkFileType = function(options) {
        var defaults = {
            allowedExtensions: [],
            success: function() {},
            error: function() {}
        options = $.extend(defaults, options);

        return this.each(function() {

            $(this).on('change', function() {
                var value = $(this).val(),
                    file = value.toLowerCase(),
                    extension = file.substring(file.lastIndexOf('.') + 1);

                if ($.inArray(extension, options.allowedExtensions) == -1) {
                } else {





$(function() {
        allowedExtensions: ['jpg', 'jpeg'],
        success: function() {
        error: function() {


step 3: CSS code

label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;

Read :

Also Read This πŸ‘‰   file upload validation in jquery


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery validations for image upload in php.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.