How To Validate Max File Size Using Javascript

Websolutionstuff | Aug-03-2020 | Categories : Laravel PHP jQuery

This article will show us how to validate max file size using javascript. Many times we have a requirement to check the validation of the maximum file size before uploading to the server. So, I have created a post on max file upload validation jquery.

So, let's see file upload validation in javascript or file upload size validation using jquery.

I have created one blade file and checked file size using the if condition in jquery.

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload size validation in javascript - websolutionstuff.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 - websolutionstuff.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').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){
            $('#error-message').html("File upload size is larger than 2MB");
            $('#error-message').css("display","block");
            $('#error-message').css("color","red");
          }else{
            $('#error-message').css("display","none");
          }
        }
      }
    });
  });
</script>

 

And you will get output like this.

file upload size validation

 


You might also like:

Recommended Post
Featured Post
How To Install php-zip Extension In Ubuntu
How To Install php-zip Extensi...

In this article, I will guide you through the process of installing the php-zip extension on Ubuntu. The php-zip extensi...

Read More

Jul-14-2023

How To Validate Form In React JS
How To Validate Form In React...

In this article, we will see how to validate a form in react js. We will validate the input type email, phone numbe...

Read More

Sep-07-2022

How To Validate International Phone Number Using jQuery
How To Validate International...

In this article, we will see how to validate international phone numbers using jquery. Here, we will learn about mo...

Read More

May-12-2023

Vue Js Sweetalert Modal Notification Tutorial
Vue Js Sweetalert Modal Notifi...

In this example, we will see vue js sweetalert modal notification tutorial. vue.js wrapper for sweetalert2. with su...

Read More

Jan-12-2022