如何使用jquery插件验证上传的文件?

时间:2013-04-12 17:33:28

标签: jquery jquery-validate

我在wordpress中使用这个脚本。

这是我的代码:

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

这是表单字段

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

适用于图像文件验证,但不验证pdf和doc文件。继续提供我在消息“Only doc/docx/pdf files are allowed”中定义的相同消息。 我也在控制台中得到了这个:

TypeError: b.browser is undefined

编辑:

在Kevin B帮助评论后,TypeError消失了,但它仍未验证pdf文件。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

The accept rule is for validating by mime-type

如果您尝试按文件扩展名验证,则需要使用extension规则。

请参阅: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"
    }
},