如何使用jQuery插件验证上传的文件？

Question

I am using this script in wordpress.

Here is my code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/jzaefferer/jquery-validation/master/jquery.validate.js"></script>
<script src="https://raw.github.com/jzaefferer/jquery-validation/master/additional-methods.js"></script>
<script>
            jQuery(document).ready(function($){
                $("#subsciptionForm").validate({
                    rules: {
                        headshot: {
                            required: true,
                            accept: "jpg,png,jpeg,gif"
                        },
                        actorcv: {
                            required: true,
                            accept: "application/msword, application/pdf"
                        }
                    },
                    messages: {
                        headshot: {
                            required: 'Select an image to upload',
                            accept: 'Only images with type jpg/png/jpeg/gif are allowed'
                        },
                        actorcv: {
                            required: "Select a CV",
                            accept: 'Only doc/docx/pdf files are allowed'
                        }
                    },
                    submitHandler: function(form) {
                        //form.submit();
                        var url = '<?php echo SET_SUBSCRIBER; ?>';
                        var datastring = $("form").serialize();
                        alert(datastring); return false;              
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: datastring,
                            success: function(data) {
                                //alert(data); return false;
                                form.submit();
                            }
                        });
                        return false;
                    }
                });
            });
        </script>

Here is the form field

                        <!-- Upload Headshot -->
                    <tr>            
                        <td class="title_cell" width="23%">
                            Upload Headshot :<span class="required">*</span>
                        </td>
                        <td class="field_cell">
                            <input type="file" class="required" name="headshot" size="25"> (jpg, gif or png only, with maximum 1MB size)
                        </td>
                    </tr>
                    <!-- Upload Actor's CV -->
                    <tr>            
                        <td class="title_cell" width="23%">
                            Upload Actor's CV :<span class="required">*</span>
                        </td>
                        <td class="field_cell">
                            <input type="file" class="required" name="actorcv" size="25"> (MS-word or PDF only, with maximum 1MB size)
                        </td>
                    </tr>

It works well with for image file validation but does not validate pdf and doc file. Keep on giving the same message i have defined in message " Only doc/docx/pdf files are allowed ". Also i get this in console :

TypeError: b.browser is undefined

Edited :

The TypeError is gone after Kevin B help in comment but it is still not validating pdf file. Any idea ?

Answer 1

The accept rule is for validating by mime-type .

If you're trying to validate by file extension, you'd want to use the extension rule.

See: http://docs.jquery.com/Plugins/Validation/CustomMethods/extension#extension

rules: {
    headshot: {
        required: true,
        extension: "jpg,png,jpeg,gif"
    },
    actorcv: {
        required: true,
        accept: "application/msword, application/pdf"
    }
},