image validation in jquery

Today, We want to share with you image validation in jquery.In this post we will show you file upload validations in jquery, hear for select image validations in jquery we will give you demo and example for implement.In this post, we will learn about JQuery Validate Multiple File Image Upload Validations with an example.

Free Live Chat for Any Issue

How to add custom jquery validation for image file upload?

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
	<title>Summernote image size limit validations - www.pakainfo.com</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
	<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />


	<!-- include summernote css/js-->
	<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>


<div class="container">
	<h2>Summernote</h2>
	<div id="summernote">Hello Summernote</div>
</div>


</body>


<script type="text/javascript">
    $(document).ready(function() {
     $('#summernote').summernote({
           height: 300,
           callbacks: {
           onImageUpload: function(image) {
                 var sizeKB = image[0]['size'] / 1000;
                 var tmp_pr = 0;
                 if(sizeKB > 200){
                    tmp_pr = 1;
                    alert("pls, select less then 200kb image.");
                 }
                 if(image[0]['type'] != 'image/jpeg' && image[0]['type'] != 'image/png'){
                    tmp_pr = 1;
                    alert("pls, select png or jpg image.");
                 }
                 if(tmp_pr == 0){
                     var file = image[0];
                     var reader = new FileReader();
                    reader.onloadend = function() {
                        var image = $('<img>').attr('src',  reader.result);
                        $('#editor').summernote("insertNode", image[0]);
                    }
                   reader.readAsDataURL(file);
                 }
              }
          }
      });
   });
</script>
</html>

File Size Validation Using Jquery Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <title>File Size Validation Using Jquery Example - www.pakainfo.com</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body class="bg-dark">
    <div class="continer">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <div class="card-header">
                        <h5>File Size Validation Using Jquery Example</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" name="frmAdd" id="frmAdd">
                            <div class="form-group">
                                <label for="image">Image:</label>
                                 <input type="file" name="image" class="form-control" id="image" value="">
                           </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
 <script>
 $(function() {
    $('#image').change(function(){
        if(Math.round(this.files[0].size/(1024*1024)) > 2) {
            alert('Please select image size less than 2 MB');
        }else{
            alert('success');
        }
    });
 });
 </script>
</html>

I hope you get an idea about jquery validation 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.

Rate this post