How to Check File Size Before Uploading Using Jquery

File uploading is a very mutual feature and It is e'er a good affair to know that what size of file is end user is uploading at the server. As it is quite possible that you don't want to allow users to upload huge files. So it is meliorate to check the size of file before it actually gets uploaded on server. Then in this post, I will show you that how to bank check file size earlier uploading using jQuery.

To check the file size, one must access to file system and as you know that jQuery is customer side library and it doesn't provide admission to user's system. Merely good news is that the HTML 5 File API specification, some backdrop of files are accessible at client side and file size is one of them. So the thought is to use the size property and notice out the file size. Only as it is a part of HTML 5 specification so it volition only work for modern browsers and unfortunately IE 9 and below version are not mod :(

Below is the latest list of supported browsers.

So the below jQuery code is going to piece of 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 issue.

//Lawmaking 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.circular((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 effect below.

Other than size holding there are some other properties every bit well, which can too be accessed.

• proper noun: Returns name of the file.
• blazon: Returns MIME-Type of the file.
• lastModifiedDate: Returns final modified date.

As the IE is not supporting the HTML 5 File API and so what is the solution to check the file size. Well, with IE y'all can use FileSystem ActiveX object to get the file size. But the problem with latest IE versions (7,eight and 9) is that by default they don't allow ActiveX objects from security reason perspective. If y'all want to run this, and then you accept to explicitly allow ActiveX object by irresolute 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 inquire your end-users to do these kind of settings. Promise that IE ten will support the HTML 5 API.

So the complete code looks like beneath lawmaking. It commencement checks if browser is IE or not. If information technology's IE and so using ActiveX object gets the file size. If not then get the file size using HTML 5 API.

//Code Starts $(document).prepare(function() {    $("#flUpload").modify(role ()     {       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 > one)       {          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");       }       });  }); //Lawmaking Ends        

You tin can too check these Flash based plugins which checks the file size.

• Uploadify
• SWFUpload

Hope you lot find this post useful.

Feel free to contact me for whatever assistance related to jQuery, I will gladly assistance y'all.

mileshathouty.blogspot.com

Source: https://learningjquery.com/2012/03/how-to-check-file-size-before-uploading

Share this post