File or Image Upload Validation using Jquery Validation

File or Image Upload Validation using Jquery Validation Example

$("#form1").validate({

        rules: {
        
categoryBanner:{

filesize:1048576
},
        },
messages: { categoryBanner: "File must be JPG, GIF or PNG, less than 1MB" },


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
        }

    });

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (in bytes)
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param)
});

<input type="file" name="categoryBanner" />
<input type="submit" name="submit"/>

Tweet