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 Restrict Special Characters Using jQuery Regex
How To Restrict Special Charac...

In this article, we will see how to restrict special characters using jquery regex. Here, we will learn how to crea...

Read More

Dec-26-2022

How to Add Active Class Dynamically in Laravel 11
How to Add Active Class Dynami...

Hello, laravel web developers! In this article, we'll see how to add an active class dynamically in laravel 11. Here...

Read More

Jul-08-2024

Laravel 8 Socialite Login with Google Account
Laravel 8 Socialite Login with...

In this article, we will see laravel 8 socialite login with a google account. This post gives you an example of a larave...

Read More

Dec-01-2020

How to Install PHP PDO MySQL Extension in Ubuntu 22.04
How to Install PHP PDO MySQL E...

Hey there! If you're diving into PHP development on Ubuntu 22.04 and need to connect your applications to MySQL data...

Read More

Feb-28-2024