jQuery File Size Validation

In this tutorial we are going to see hwo to see validate size of the upload file on client side using jQuery.


For example my contains two input file like this...

<form role="form" method="post" enctype="multipart/form-data">
   <div class="form-group">
      <label for="file">Choose your Image: </label>
      <input type="file"  class="coverimage" id="file1" name="file[]" multiple>
   </div>
   <div class="form-group">
       <label for="file">Choose your Image: </label>
       <input type="file"  class="coverimage" id="file2" name="file[]" multiple>
   </div>
   <button id='submit_btn' class="btn btn-default">upload</button>
</form> 

So when ever choose his files(image, audio files (mp3, mp4), videos files, word document, xl document, text file and etc) via input file field, with help of it's calss name i am getting user seleceted file information (size. file type and etc.). Use the following jQuery script to validate File Size of upload file.

   <script>
     $(document).on('change','.coverimage',function(){
          files = this.files;
          size = files[0].size;
          //max size 50kb => 50*1000
          if( size > 50*1000){
             alert('Please upload less than 50kb file');
             return false;
          }
          return true;
     });
    </script>