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

By Hardik Savani | June 15, 2016 | 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.


<html lang="en">


<title>Jquery - multiple image upload with size validation</title>

<script src=""></script>



<div class="container text-center">

<div class="grid-stack">

<input type="file" id="fUpload" multiple />



<script type="text/javascript">



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');










Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.