How to check file size before uploading using jQuery
To check the file size, one must access to file system and as you know that jQuery is client side library and it doesn't provide access to user's system. But good news is that the HTML 5 File API specification, some properties of files are accessible at client side and file size is one of them. So the idea is to use the size property and find out the file size. But as it is a part of HTML 5 specification so it will only work for modern browsers and unfortunately IE 9 and below version are not modern :(
Below is the latest list of supported browsers.
So the below jQuery code is going to work in only supported browsers (listed above in the image). Size property provides size in bytes and code converts it into either GB, MB or KB (based on the bytes) and display the result.
//Code Starts
$(document).ready(function() {
$("#flUpload").change(function ()
{
var iSize = ($("#flUpload")[0].files[0].size / 1024);
if (iSize / 1024 > 1)
{
if (((iSize / 1024) / 1024) > 1)
{
iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
$("#lblSize").html( iSize + "Gb");
}
else
{
iSize = (Math.round((iSize / 1024) * 100) / 100)
$("#lblSize").html( iSize + "Mb");
}
}
else
{
iSize = (Math.round(iSize * 100) / 100)
$("#lblSize").html( iSize + "kb");
}
});
});?
//Code Ends
Please test this demo either in Chrome or Firefox.
See result below.
Other than size property there are some other properties as well, which can also be accessed.
- name: Returns name of the file.
- type: Returns MIME-Type of the file.
- lastModifiedDate: Returns last modified date.
As the IE is not supporting the HTML 5 File API then what is the solution to check the file size. Well, with IE you can use FileSystem ActiveX object to get the file size. But the problem with latest IE versions (7,8 and 9) is that by default they don't allow ActiveX objects from security reason perspective. If you want to run this, then you have to explicitly allow ActiveX object by changing the settings of IE.
To allow ActiveX -> Go to Tools->Internet Options-> Security->Custom Level->Choose Enable or Prompt ActiveX.
But this is not a perfect solution as you can't ask your end-users to do these kind of settings. Hope that IE 10 will support the HTML 5 API.
So the complete code looks like below code. It first checks if browser is IE or not. If it's IE then using ActiveX object gets the file size. If not then get the file size using HTML 5 API.
//Code Starts
$(document).ready(function() {
$("#flUpload").change(function ()
{
var iSize = 0;
if($.browser.msie)
{
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var sPath = $("#flUpload")[0].value;
var objFile = objFSO.getFile(sPath);
var iSize = objFile.size;
iSize = iSize/ 1024;
}
else
iSize = ($("#flUpload")[0].files[0].size / 1024);
if (iSize / 1024 > 1)
{
if (((iSize / 1024) / 1024) > 1)
{
iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
$("#lblSize").html( iSize + "Gb");
}
else
{
iSize = (Math.round((iSize / 1024) * 100) / 100)
$("#lblSize").html( iSize + "Mb");
}
}
else
{
iSize = (Math.round(iSize * 100) / 100)
$("#lblSize").html( iSize + "kb");
}
});
});
//Code Ends
You can also check these Flash based plugins which checks the file size.
Hope you find this post useful.
Feel free to contact me for any help related to jQuery, I will gladly help you.
