This is important if you have set a limit for the number files to be uploaded or a specific size for each or all the files together. If the person tries to upload files that exceed the permissible limit, then the app must display a message, telling the user not to exceed the limit. Likewise, you can do many useful things with the size of the files, such as, convert the bytes to Kilobytes etc.
The first example is in JavaScript, followed by an example using jQuery. Each example has demos.
Check Image Width, Height and its Type before Uploading using JavaScript
1) Get File Size using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Get File Size Before Uploading in JavaScript</title>
</head>
<body>
<p>
<input type="file" id="file" multiple onchange="GetFileSize()" />
</p>
<p id="fp"></p>
</body>
<script>
function GetFileSize() {
var fi = document.getElementById('file'); // GET THE FILE INPUT.
// VALIDATE OR CHECK IF ANY FILE IS SELECTED.
if (fi.files.length > 0) {
// RUN A LOOP TO CHECK EACH SELECTED FILE.
for (var i = 0; i <= fi.files.length - 1; i++) {
var fsize = fi.files.item(i).size; // THE SIZE OF THE FILE.
document.getElementById('fp').innerHTML =
document.getElementById('fp').innerHTML + '<br /> ' +
'<b>' + Math.round((fsize / 1024)) + '</b> KB';
}
}
}
</script>
</html>Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - No
In the markup section, I have added the file input element, and assigned the multiple attribute. The multiple is an HTML5 feature. It also has an event onchange(), that is, when I select files from the folder, it will automatically call the function GetFileSize().
How Can I Get the x Character in a String Using JavaScript?
Inside the script, I’ll first get the file object, then find the length (number of files) and iterate through the file list to get the size of each files. The default value (the size) is in bytes. However, I am converting the bytes to Kilobytes, by dividing the size with 1024.
1 KB (Kilobyte) = 1024 Bytes
The JavaScript round() method will round of the values and display the size without any decimal values. This Math function is optional.
2) Get File Size using jQuery
Now, let’s see the jQuery example of the above script. The markup remains same, however, without the event. Just add the CDN for jQuery in the <head> section.
<head>
<title>Get File Size using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>
<input type="file" id="file" multiple />
</p>
<p id="fp"></p>
</body>
<script>
$(document).ready(function () {
$('#file').change(function () {
if (this.files.length > 0) {
$.each(this.files, function (index, value) {
$('#fp').html($('#fp').html() + '<br />' +
'<b>' + Math.round((value.size / 1024)) + '</b> KB');
})
}
});
});
</html>The jQuery .change() function will trigger the change event, when the user selects a file (or files). The $.each() function will iterate through the files. It’s like the for loop in the JavaScript. The $.each() has two parameters. The first is file object, and the second is the callback function (with index and value) that will execute on each file. The value returns the size of each file.
Math.round(value.size);
Well, that’s it. This is a very useful example if you wish to know the size of the files before uploading it to the server. Using similar method, you can get the name, size and total number of files using JavaScript or even by jQuery. However, if you are reluctant to use JavaScript for your app, then please check the browser compatibility of the methods.
Thanks for reading ☺.