Javascript jQuery验证程序不适用于文件输入类型

我正在尝试使用jqueryvalidator插件实现文件输入类型的验证。 文件输入类型应仅接受扩展名为.jpeg、.jpg和.png的图像，并且文件大小不应大于1MB。 其他输入字段的验证工作没有任何问题。文件输入类型所需的验证工作

可能是什么问题

Javascript

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

$('#form').validate({
        rules: {
            firstname: {
                minlength: 6,
                required: true
            },
            lastname: {
                minlength: 6,
                required: true
            },
            file: {
                required: true, 
                accept: "png|jpeg|jpg",
                filesize: 1048576 
            }
        },
        messages: 
           { 
            file: "File must be JPEG or PNG, less than 1MB" 
           },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

jQuery.validator.addMethod（'filesize'，函数（值、元素、参数）{
返回此。可选（元素）| |（元素.files[0]。大小
…应仅接受扩展名为.jpeg、.jpg和.png的图像

仅适用于MIME类型。适用于文件扩展名。看起来您应该使用
扩展名
规则，而不是
接受
。您还需要包含才能使用这些规则

为了访问文件的size属性，您需要在
标记上设置
enctype=“multipart/form data”
属性

工作演示：
我在控制台中收到一个调用错误“…应仅接受扩展名为.jpeg、.jpg和.png的图像”~仅适用于MIME类型。适用于文件扩展名。您还需要包括这些规则。
<form id="form">
    <div class="form-group">
        <label class="control-label" for="firstname">First:</label>
        <div class="input-group">
            <input class="form-control"  name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Last:</label>
        <div class="input-group">
            <input class="form-control" name="lastname" type="text" />
        </div>
    </div>

        <div class="form-group">
        <label class="control-label" for="file">Image:</label>
        <div class="input-group">
            <input  id="file" name="file" type="file" />
        </div>
    </div>


        <button type="submit" class="btn btn-primary">Submit</button>
</form>