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

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#userImgFileLive").change(function(){
		$("#img_genrated_err").html("");
		$(".userImgFileExample1").css("border-color","#F0F0F0");
		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>");
			$(".userImgFileExample1").css("border-color","#FF0000");
			return false;
		} 
		return true;
	});
});
</script>
</head>
<body>
<span id="img_genrated_err"></span>
<input type="file" id="userImgFileLive" name="userImgFileExample1" class="file_upload1">
</body>
</html>

Example 2: Upload image (JPEG only)

Also Read: jquery validate file type before upload

Read Also:  how to get key and value from json array object in javascript?

Step 1: Html Part

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

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) {
                    options.error();
                    $(this).focus();
                } else {
                    options.success();

                }

            });

        });
    };

})(jQuery);

$(function() {
    $('#image').checkFileType({
        allowedExtensions: ['jpg', 'jpeg'],
        success: function() {
            alert('Success');
        },
        error: function() {
            alert('Error');
        }
    });

});

step 3: CSS code

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

Read :

Read Also:  How to validate upload file size and file extension using JavaScript?

Summary

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 infinityknow.com 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.