Check File Size & Extension Before Uploading Using jQuery

Demo Download

Today, i will share a tutorial with you how to check file size and extension before uploading the file. It is one of the most common validation that need to be check before uploading file, i wrote this simple tutorial to validate the image file size (Maximum 1 MB Allowed) and extension (JPG, JPEG, PNG or GIF are allowed) for our image file by using jQuery.

Additionally, submit button will remain disable until the valid input file is provided.

Note: Kindly don’t forget to include the jQuery library in the header or footer of web page.

The HTML

The jQuery

If you found this tutorial helpful so kindly share it with your friends and leave your comment.

Article By

Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

6 Comments

  1. I just used this code to check the file type and size of an upload script on my site. I already implemented the php version of it but I needed javascript and this got the job done for me.
    Thanks a lot

  2. Hi, Javed Ur Rehman, I like your code and want to modify it and include it in my project. the challenge am having is i can’t make it to validate the width and height before enabling or disabling the check button am using. Please, can you help. This is the modified code below. Thanks
    it is only working for the size and type but won’t work for the width and height
    $(‘input[type=”button”]’).prop(“disabled”, true);
    var a=0;
    //binds to onchange event of your input field
    $(‘#picture’).bind(‘change’, function()
    {
    “use strict”;
    if ($(‘input:button’).attr(‘disabled’,false))
    {
    $(‘input:button’).attr(‘disabled’,true);
    }
    //this to validate image type
    var ext = $(‘#picture’).val().split(‘.’).pop().toLowerCase();
    if ($.inArray(ext, [‘gif’,’png’,’jpg’,’jpeg’]) === -1)
    {
    $(‘#error1’).slideDown(“slow”);
    $(‘#error2’).slideUp(“slow”);
    $(‘#error3’).slideUp(“slow”);
    a=0;
    }else{
    //this is where i want to validate the width and height
    var width = (this.files[0].width);
    var height = (this.files[0].height);
    if (width > 413 || height > 532)
    {
    $(‘#error3’).slideDown(“slow”);
    a=0;
    }else{
    a = 1;
    $(‘#error3’).slideUp(“slow”);
    //to validate image size
    var picsize = (this.files[0].size);
    if (picsize > 15000)
    {
    $(‘#error2’).slideDown(“slow”);
    a=0;
    }else{
    a=1;
    $(‘#error2’).slideUp(“slow”);
    }
    }
    $(‘#error3’).slideDown(“slow”);
    $(‘#error1’).slideUp(“slow”);
    if (a===1)
    {
    $(‘input:button’).attr(‘disabled’,false);
    }
    }
    });

    1. Well it will be more better if you provide the demo link so that i can check it on the spot, but i advice that you can use this to get the height and width then place condition on it.
      var img = document.getElementById(‘imageid’);
      //or however you get a handle to the IMG
      var width = img.clientWidth;
      var height = img.clientHeight;
      Use alert to check if you are getting height or width of image for testing purpose only.

Leave a Reply

Your email address will not be published. Required fields are marked *