jQuery文件上传验证不起作用

时间:2018-04-30 09:01:27

标签: jquery

代码:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    $( "#myform" ).validate({
        rules: {
            user_image: {
                required: true,
                extension: "jpeg|jpg|png"
            },
            user_resume:{
                required:true,
                extension: "docx|doc"
            }
        }
    });
</script>
<form method="post" id="myform" enctype="multipart/form-data">
    <input type='file' name='user_image' id='user_image'>
    <input type='file' name='user_resume' id='user_resume'>
</form>

在这段代码中我创建了一个简单的表单,其中我有两个输入字段类型是file。在第一个输入字段中,我想用jpeg | jpg | png扩展来验证user_image,类似于user_resume输入字段我想用docx | doc扩展文件验证但是这还没有工作。我不知道为什么。那么,我该怎么办呢?请帮帮我。

谢谢

1 个答案:

答案 0 :(得分:0)

使用以下代码。它工作正常。

$( document ).ready(function() {
    console.log( "ready!" );
    $("#user_image").change(function () {

        var val = $(this).val();

        switch (val.substring(val.lastIndexOf('.') + 1).toLowerCase()) {
            case 'gif': case 'jpg': case 'png':
                alert("an image");
                break;
            default:
                $(this).val('');
                // error message here
                alert("not an image");
                
                break;
        }
    });
    $("#user_resume").change(function () {

        var val = $(this).val();

        switch (val.substring(val.lastIndexOf('.') + 1).toLowerCase()) {
            case 'doc': case 'docx':
                alert("A Reume");
                break;
            default:
                $(this).val('');
                // error message here
                alert("not A Reume");
              
                break;
        }
    });
   
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' name='user_image' id='user_image'>
    <input type='file' name='user_resume' id='user_resume'>