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

Contents

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

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

jQuery validation and accept=”image/*”

You can use the jQuery validation plugin to validate a file upload input field that accepts only images using the accept attribute with the value image/*.

Here is an example code snippet:

<form>
  <label for="imageUpload">Choose an image to upload:</label>
  <input type="file" id="imageUpload" name="imageUpload" accept="image/*">
  <button type="submit">Submit</button>
</form>

In this code, we have added an input field of type file with the ID of imageUpload and a name attribute of imageUpload. We have also added an accept attribute with the value of image/* to specify that only image files can be selected.

Also Read This 👉 File Type validation using Javascript

Next, you can use the jQuery validation plugin to validate this input field. Here is an example code snippet:

$("form").validate({
  rules: {
    imageUpload: {
      required: true,
      accept: "image/*"
    }
  },
  messages: {
    imageUpload: {
      required: "Please select an image to upload.",
      accept: "Only image files are allowed."
    }
  }
});

In this code, we are using the validate method of the jQuery validation plugin to validate the form. We have specified a set of validation rules for the imageUpload input field using the rules option.

We have set the required rule to true to ensure that the input field is not empty. We have also set the accept rule to “image/*” to ensure that only image files can be selected.

We have also provided custom error messages for each validation rule using the messages option.

With these validation rules in place, the form will not be submitted if the imageUpload input field is empty or contains a file that is not an image. Instead, the user will see an error message indicating that an image file is required.

Read :

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.