Check whether the file is image and less then 50kb in Jquery

File uploading is a very common feature and It is always a good thing 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 better to check the size of file before it actually gets uploaded on server. So in this post, I will show you that how to check file size before uploading using jQuery.

Click here to see the working Demo

HTML structure
We will take an file input with flUpload as id.



Javascript code:

$(document).ready(function() {
   $("#flUpload").change(function ()
   {
    
     var iSize = 0;
     var filename = "";

     if($.browser.msie)
     { 

        /*If browser is IE*/      
        var objFSO = new ActiveXObject("Scripting.FileSystemObject");
        var sPath = $("#flUpload")[0].value;
        var objFile = objFSO.getFile(sPath);
        var iSize = objFile.size;
        filename = objFile.name;
        iSize = iSize/ 1024;
     }
     else{
        iSize = ($("#flUpload")[0].files[0].size / 1024);    
        filename = $("#flUpload")[0].files[0].name;
     }   
   
     var ext = (" " + filename + " ").match(/([^\s]+(?=\.(jpg|gif|png))\.\2)/gm);   
     var ext = 1
     if(ext)
     {
        iSize = (Math.round(iSize * 100) / 100);   
        $("#lblSize").html("");
        if (iSize > 50)
        {
            alert("Please select the file less then 50kb");
        }
        else
        {
            $("#lblSize").html( iSize  + "kb");
        }
     }
    else{
        alert("Please select the proper image File");
    }   
  });
});

HTML5 and CSS3 - Part 5

HTML video tag
Can be used to create custom start/stop buttons etc..



HTML5 embed tag
The embed tag defines a container for an external application or interactive content (a plug-in).









HTML5 source tag
The source tag is used to specify multiple media resources for media elements, such as video and audio.

The source tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.

HTML5 track tag

The track tag specifies text tracks for media elements ( audio and video).

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.