Validation of Image Size

Question

I am trying to use jQuery Validate plugin to validate a field file.

I just want to check the image size. If it is larger than 3mb it is not to submit the form.

Look at my code below:

$.validator.addMethod('filesize', function(value, element, param) {
    return this.optional(element) || (element.files[0].size >= param) 
});

if($("#form-ouvidoria")[0]){
   $("#form-ouvidoria").validate({
      rules             : {
        assunto         : "required",
        departamento    : "required",
        mensagem        : "required",
        field: { 
            required: true, 
            extension: "png|jpe?g|gif", 
            filesize: 3145728
        }
      },
      submitHandler: function(form){
        $("#enviaChamado").attr('disabled', 'true');
        $('span.loading').css('opacity', '1');
        form.submit();
      }
   });
}

But when selecting an image larger than 3mb and pressing on send gives the following error:

Uncaught Typeerror: Cannot read Property 'call' of Undefined. Exception occurred when checking element , check the 'Extension' method.

Answer 1

I use the jQuery Fileupload to do this. Natively it already has this validation, and some other cool features.

$('#fileupload').fileupload({
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // tipo de arquivos
    maxFileSize: 512000 // tamanho maximo
    [...]
});

Answer 2

Corrected. I didn’t know, but I found on the internet that should import the following file:

jqueryvalidation.org/files/dist/additional-methods.min.js