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 jQuery

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

Facebook Official Page: All PHP Tricks

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.


    1. We upload image on our host, if you want to replace image, you will need to use unlink function, this will delete old file, all you need is to pass file name and location in this function.

  1. i am unable to get the Exact validation for multiple file upload. Here my form like this

    Upload your Article(s) *


    Supported files: doc, docx, pdf, xls, xlsx, ppt, pptx
    Add More +Note: If you want to upload more files please click Add More button

    when i click on Add More button it will add Multiple file uploads.Here js code for that one

    /*—upload article—–*/

    $(‘#md-multi-file-table tbody’).append(‘ Remove ‘);




  2. Wow you are very smart i wish you could teach me how to make a game of my own if you can help contact me

      1. Thanks a lot for your “Check file size and type before uploading”
        It was very helpful for me.
        Now I want to know about: ” Check the file name/ Image name of the dir using Ajax, error Msg: Already exist.

        Please help.

  3. 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

  4. 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))
    //this to validate image type
    var ext = $(‘#picture’).val().split(‘.’).pop().toLowerCase();
    if ($.inArray(ext, [‘gif’,’png’,’jpg’,’jpeg’]) === -1)
    //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)
    a = 1;
    //to validate image size
    var picsize = (this.files[0].size);
    if (picsize > 15000)
    if (a===1)

    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 *