How to check file size when select multiple file validation using Jquery?

By Hardik Savani | June 15, 2016 | | 15549 Viewer | Category : Javascript 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.

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

Example:

<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; // 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>



Do you want to expert php developer or developer team for your projects ?
Contact US