image size validation in javascript example

image size validation in javascript example : Validation of file size while uploading using JavaScript / jQuery. explain to you how to check file (Image) size validation before upload the file using Javascript.

image size validation in javascript example

We will explain to you how to check file (Image) size validation before upload the file using Javascript. The File Size Validation plugin handles blocking of files that are too large

How To Validate Max File Size Using Javascript?

index.html

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload size validation in javascript - www.pakainfo.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload size validation in javascript - www.pakainfo.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="uploadnewfl"><br>
  <span id="messageDisplayErr" class="validation-error-label"></span>
  </div>
</body>
</html>

Don’t Miss : File upload required validation in javascript

script.js

<script type="text/javascript">
  $(document).ready(function(){
    $('#uploadnewfl').on('change',function(){
      for(var i=0; i< $(this).get(0).files.length; ++i){
        var file1 = $(this).get(0).files[i].size;
        if(file1){
          var file_size = $(this).get(0).files[i].size;
          if(file_size > 2000000){
            $('#messageDisplayErr').html("File upload size is larger than 2MB");
            $('#messageDisplayErr').css("display","block");
            $('#messageDisplayErr').css("color","red");
          }else{
            $('#messageDisplayErr').css("display","none");
          }
        }
      }
    });
  });
</script>

Don’t Miss : Check multiple file extension in jQuery

I hope you get an idea about image size validation in javascript example.
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.

Also Read This 👉   Bootstrap Forms group - Examples & Tutorials