JQuery Validate File Size with Multiple File Upload Example

By Hardik Savani June 6, 2023 Category : jQuery

Hey Dev,

This tutorial will provide an example of jquery multiple image upload with size validation. This tutorial will give you a simple example of multiple file upload with max size validation. you will learn jquery multiple select file validate file size before upload. you can understand a concept of jquery multiple image upload with size validation. Let's get started with multiple file upload with max size validation.

Sometimes we require to add validation of max file size using jquery, If we have only single file for validation then we can do it easily that, but if we have multiple file then you have to calculate size of all selected files and then check max required file size.

So, in this example you can see how to check validation for max size in multiple file select using jquery.

Example:

Read Also: How to Remove Element from Array in JQuery?
<html lang="en">
<head>
    <title>Jquery - multiple image upload with size validation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
</head>
<body>

<div class="container text-center">

	
    <div class="grid-stack">
        <input type="file" id="fUpload" multiple />
        <button>Save</button>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){
        $('#fUpload').change(function(){
               var fp = $("#fUpload");
               var lg = fp[0].files.length; 
               var items = fp[0].files;
               var fileSize = 0;
           
           if (lg > 0) {
               for (var i = 0; i < lg; i++) {
                   fileSize = fileSize+items[i].size;
               }
               if(fileSize > 2097152) {
                    alert('File size must not be more than 2 MB');
                    $('#fUpload').val('');
               }
           }
        });
    });
    </script>

            
</div>	

</body>
</html>

I hope it can help you...

Tags :
Previous

How to use Inject View in Laravel?
Next

How to Use Elasticsearch from Scratch in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares