Multiple file upload extension validation using jQuery Validate

Today, We want to share with you Multiple file upload extension validation using jQuery Validate.In this post we will show you Validate multiple image field using jQuery, hear for jquery validation for file upload extension and size we will give you demo and example for implement.In this post, we will learn about How to check file size when select multiple file validation using Jquery? with an example.

Multiple file upload extension validation using jQuery Validate

There are the Following The simple About Multiple file upload extension validation using jQuery Validate Full Information With Example and source code.

As I will cover this Post with live Working example to develop jQuery Validate plugin for multiple file upload validation, so the some image validation in jquery for this example is following below.

Also Read :  Jquery File Upload Size validation Example

jquery validation for file upload extension and size

<!DOCTYPE html>
<html>
<head>
<title>jquery validate extension multiple images upload</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>

<form id="createpreview">
   <input type="file" required="" name="filesimg_src[]" multiple/>
    <input type="submit" />
</form>
<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
<script>
jQuery.validator.addMethod("extension", function(value, element, param) {
	param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
	return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
}, jQuery.format("Please enter a value Like (jpg, jpeg, png, PDF, doc, docx) a valid extension."));

$.validator.addMethod('maxfilesize', function(value, element, param) {
   var length = ( element.files.length );

    var fileSize = 0;

           if (length > 0) {
               for (var i = 0; i < length; i++) {
                   fileSize = element.files[i].size; // get file size
                    // console.log("if" +length);

                        fileSize = fileSize / 1024; //file size in Kb
                        fileSize = fileSize / 1024; //file size in Mb

                     return this.optional( element ) || fileSize <= param;
               }

            }
            else
            {
                return this.optional( element ) || fileSize <= param;
                    //console.log("else" +length);
            }
});

$('#createpreview').validate({
		rules: {
				"filesimg_src[]": {
				             required: true,
				             maxfilesize : 5,
				             extension: "jpg|jpeg|png|PDF|doc|docx",
				             filesize: 10971520,  
				          }
		}, messages: {
			    'filesimg_src[]':{
			      	 maxfilesize : "File size must not be more than 10 MB."
			    }
		}
});
</script>
</body>
</html>

Validate multiple image field using jQuery

jQuery.validator.addMethod("extension", function(value, element, param) {
	param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
	return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
}, jQuery.format("Please enter a value with a valid extension."));

More jQuery Validation methods:http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js

Also Read :  Automatically Laravel Create dynamic generate sitemap
jQuery Validate plugin for multiple file upload validation
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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

Related Search : jquery validate extension multiple images upload,How to check file size when select multiple file validation using Jquery?,Multiple File Upload Input,Validate multiple image field using jQuery,jQuery validation for file type extension,jquery validation for image upload in php,jquery validation for file upload extension and size,multiple file upload validation in javascript,image validation in jquery,multiple image upload validation in javascript,jquery validate csv file upload,image validation in javascript,jquery validation engine file upload

I hope you get an idea about Multiple file upload extension validation using jQuery Validate.
I would like to have feedback on my Pakainfo.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.

Recommended For You.

jQuery Validate Multiple File Image Upload validation
Today, We want to share with you jQuery Validate Multiple File Image Upload validation.In this post we will show you

Add a Comment

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