jQuery Validate Multiple File Image Upload validation

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 Validate single/multiple image field using jQuery, hear for jQuery Validate plugin for multiple file upload validation 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.

jQuery Validate Multiple File Image Upload 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.

Multiple File images upload jquery validation

jquery – addMethod

$.validator.addMethod('maxupload', function(value, element, param) {
   var length = ( element.files.length );
    return this.optional( element ) || length <= param;
});

$.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);
            }
});

jQuery File Upload Control with Validate

index.php

<h3>Create New Member</h3>
<div class="well bs-component">    
<div class="pull-right"><a href="<?php echo $base_url; ?>index.php" class="btn btn-raised btn-info pull-right">Back</a></div>
<br/>
<div class="row">		  
  <div class="col-md-12">
	<div id="result"></div>    
        <form  class="form-horizontal" id="form">
	    <div class="form-group mylivefiles">
                <label for="description" class="col-lg-2 control-label">Attach files: </label>
                <div class="col-lg-10">
                   <input type="file" name="mylivefiles[]" id="mylivefiles" multiple style="opacity: 9;" >
                </div>
            </div>
		<div class="form-group"><label for="description" class="col-lg-2 control-label"></label>
		 <div class="col-lg-10">
            <b>Note :</b> The maximum allowable file size is 5 MB per Upload. &
We will except upload upto 5 files.
         </div>
		</div>
		
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <div class="form-actions">
                        <input class="btn btn-raised btn-info btn-save" type="submit" value="Submit" id="submitbtn">
                        <div id="loading" style="display:none;">
                            <div class="spinner"></div>
                            <br/>
                            Loading...
                        </div>
                    </div>
                </div>
            </div>
        </form>
		<a href="http://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
 	</div>
</div>
</div> 


<!-- JavaScripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="//openconcept.ca/sites/all/libraries/ckeditor/ckeditor.js"></script>
<script>
$(document).ready(function() {

$.validator.addMethod('maxupload', function(value, element, param) {
   var length = ( element.files.length );
    return this.optional( element ) || length <= param;
});

$.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);
            }
});
        $("#form").validate({
            rules: {
                username : {
                    required : true
                },
                category_id : {
                    required : true
                },
                subject : {
                    required : true
                },
                email : {
                    required: true,
                    email:true
                },
                description: {
                    required: true
                },
                'mylivefiles[]': {
                    maxupload: 5,
                    maxfilesize : 5
                }
            },
            messages: {
                description: "Enter Describe your issue here in details",
                subject: "The subject field is required.",
                username: "The Name field is required.",
                email: "Enter Your email.",
                category_id: "Select Your Category.",
                'mylivefiles[]':{
                   maxupload : "You can only upload a maximum of 5 images",
                   maxfilesize : "File size must not be more than 5 MB"
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("id") == "description") {
                    //element.parent('div').prev().append(error[0]);
                    $(".ck_edior_error").append(error[0]);
                } 
                else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                 $("#loading").show();
                var dataobj = {};
		        dataobj = new FormData(document.getElementById("form")); //your form ID

                console.log(dataobj);
                $.ajax({
                    type:"POST",
                    dataType:"json",
                    url: "<?php echo $myurl.'create.php'?>",
                    cache: false,
                    data: dataobj,
                    enctype: 'multipart/form-data',
                    processData: false,  // tell jQuery not to process the data
                    descriptionType: false,   // tell jQuery not to set descriptionType
                    success: function (data) {
                       console.log(data);
                       $("#loading").hide();
                        window.location = 'member.php';
                    },
                    error: function (data) {
                       // console.log('Error:', data);
                        var obj = {
                        };      
						$("#result").html('<div class="alert alert-danger">Sorry, Authentication failed</div>');
                    }
                });
            }
        });
    });
</script>

Angular 6 CRUD Operations Application Tutorials

Related Search : jquery multiple image upload with size validation, multiple file upload with max size validation, jquery multiple select file validate file size before upload, jQuery Validate plugin for multiple file upload validation, Single/multiple image validation and upload in PHP

  File upload and sending data to backend using angular js

Read :

Summary

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

I hope you get an idea about jQuery Validate Multiple File Image Upload validation.
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.

Leave a Reply

avatar
  Subscribe  
Notify of