How To Check File Size When Select Multiple File Validation Using Jquery?

Jquery

Nicesnippets

3878

15-03-2021


How To Check File Size When Select Multiple File Validation Using Jquery?

Hi Dev,

In this blog, I will show you how to check file size when select multiple file validation using jquery. 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.

This example will give you how to check validation for max size in multiple file select using jquery So let's see the bellow example.

Example :


<html lang="en">

<head>

<title>multiple image upload with size validation using JQuery - NiceSnippets.com</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; // get length

var items = fp[0].files;

var fileSize = 0;

if (lg > 0) {

for (var i = 0; i < lg; i++) {

fileSize = fileSize+items[i].size; // get file size

}

if(fileSize > 2097152) {

alert('File size must not be more than 2 MB');

$('#fUpload').val('');

}

}

});

});

</script>

</div>

</body>

</html>

It will help you....


Recommended Posts