jQuery 验证器不适用于文件输入类型

Question

我正在尝试使用 jQuery 验证器插件对文件输入类型进行验证。文件输入类型应仅接受扩展名为 .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);
            }
        }
    });

HTML

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

Fiddle that doesn't give desired result

Answer 1

...should accept only images with .jpeg, .jpg & .png extension

The accept rule is only for MIME types. The extension rule is for file extensions. Looks like you should be using the extension rule instead of accept. You also need to include the additional-methods.js file 为了使用这些规则。
为了访问文件的大小属性，您需要在 <form> 标签上设置 enctype="multipart/form-data" 属性。

工作演示：http://jsfiddle.net/mv8w3m0c/1/

jQuery 验证器不适用于文件输入类型

jQuery validator not working for file input type

javascript

jquery

jquery-validate