Monday, 13 August 2012

How to get Image Size from fileupload on client side with Jquery

Some time we require the condition that if image size greator than 2 MB then it show message that file size not allowed more than 2MB . You do it in server side but this is time taken . Now below are method where we check the size of upload file on Client side .
--------------------------------------------------------------------------------------
here i use the JQuery . Please do not forgot to add jquery file
lets the fileupload control name is
<input type="file" name ="fileuploadcatg" id="fileuploadcatg"/>
 and a label for display label size
<label id="lblSize"></label>

if ($("#fileuploadcatg").val() != "") {
//below line is getting the size of file in MB.
                        var fSize = ($("input[name='fileuploadcatg']")[0].files[0].size / 1024);
                        var actualSize = fSize;
                        if (fSize / 1024 > 1) {
                            if (((fSize / 1024) / 1024) > 1) {
                                fSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
                                $("#lblSize").html(fSize + "Gb");
                            }
                            else {
                                fSize = (Math.round((fSize / 1024) * 100) / 100)
                                $("#lblSize").html(fSize + "Mb");
                            }
                        }
                        else {
                            fSize = (Math.round(fSize * 100) / 100)
                            $("#lblSize").html(fSize + "kb");
                        }

                        if (parseInt(actualSize) > 4000) {

                            alert("Image size should not be more than 4 MB");
                            return false;
                        }
                         else
                      {
                                  // do what you want
                       }

hope this will help you .

1 comment: