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.
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>
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.