Today, We want to share with you jQuery File upload size Limit validation Example.In this post we will show you file upload size limit validation in jquery, hear for JQuery Validation – Limit number of multiple file uploads method we will give you demo and example for implement.In this post, we will learn about Get File Size before Uploading in JavaScript and jQuery with an example.

jQuery File upload size Limit validation Example

Contents

There are the Following The simple About jQuery File upload size Limit validation Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Implement File Size Restriction Validation using jQuery, so the some Jquery image upload limit with multiple select for this example is following below.

Example 1: Limit number of multiple file uploads method(JQuery Validation)

jquery validate file Limit number of multiple file

totalFiles: function( value, element, param ) {
    var length = ( element.files.length );
    return this.optional( element ) || length <= param;
}

Full Example

jQuery.validator.addMethod("totalFiles", function(value, element, param) {
        var totallength = ( element.files.length );
    return this.optional( element ) || totallength <= param;
});

$("#membersform").validate({
    rules: {
        "memberProfile[]": {
            required: true,
            totalFiles : 5,
            }
    },
    messages: {
            "memberProfile[]": {
                required: "You file or images must upload at least 1 image (maximum of 5)",
                totalFiles: "You can only simple upload a maximum total no of 5 images or files",
            },
    }
});

Example 2: jQuery File upload size with Type Validation

use jQuery’s validate

$.validator.addMethod('livefilesize', function(value, element, param) {
    return this.optional(element) || (element.files[0].size <= param) 
});

file size validation in jquery

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", livefilesize: 2097152  }},
    messages: { inputimage: "Please Choose File must be This format JPG, GIF or PNG With Must less than 2MB" }
});

Example 3: jquery multiple image upload with size validation

index.html

<html lang="en">
<head>
    <title>jquery multiple image upload with size validation- Pakainfo.com</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
</head>
<body>
<h1>File upload size validation using jQuery with demo</h1>
<p>Jquery - Ajax multiple image upload with size validation Example</p>
<div class="container text-center">
    <div class="pakainfo grid-stack">
        <input type="file" id="memberFileUpload" multiple />
        <button>Upload</button>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#memberFileUpload').change(function(){
               var memberImgfl = $("#memberFileUpload");
               var lg = memberImgfl[0].files.length; // get Files length
               var memberProfiles = memberImgfl[0].files;
               var totalflsize = 0;
           if (lg > 0) {
               for (var i = 0; i < lg; i++) {
                   totalflsize = totalflsize+memberProfiles[i].size; // get file size
               }
               if(totalflsize > 2097152) {
                    alert('Your File Allowded size must not be more than 2 MB');
                    $('#memberFileUpload').val('');
               }
           }
        });
    });
    </script>
</div>	
</body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read This 👉 Convert Json String to Array in VueJS

Summary

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

I hope you get an idea about jQuery File upload size Limit validation Example.
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.