输入type = file没有使用Jquery Validation Plugin传递给php页面

Question

I have a html form with file upload functionality which I want to validate using jquery plugin. Now if the file is empty then it's showing an error message, but if the file is different extension then it should show the message "File type is not allowed" but it seems it's not passed to the file filecheck.php page which would validate the file type.

How can I validate this file type using this jquery plugin ? Can you help me plz ? Thanks.

Html part:

<div id="result"></div> <!--error or success message will be show here-->

<form action="editContactDetails.php" method="post" enctype="multipart/form-data" id="all_contact_details">
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
    <td></td>
  </tr>
</form>

Jquery part:

$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#all_contact_details").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', false); 
            },
            success: function(response) {
            $('#result').html(response);
            //$(form).find('div').hide();
            $(form).hide();

            }            
        });
    },

        rules: {            
            file1: {
                    required: true,                    
                    remote: {
                        url: "filecheck.php",
                        type: "post"
                     }
                },

        },
        messages: {         
            file1: {
                    required: "Upload your file",                    
                    remote: "File is not allowed"
                },          
        }
    });

});

Php part (filecheck.php)

<?php
$file1 =  $_FILES['file1']['name']; 
$allowedExts = array("jpg");    
$temp = stripslashes($file1);
$temp = explode(".", $temp);
$extension = end($temp);    

if(!in_array($extension, $allowedExts))
    echo 'false';
else
    echo 'true';        
?>

Answer 1

The SubmitHandler handles the actual submit when the form is valid:
http://jqueryvalidation.org/validate/#submithandler

So this won't validate the file extension itself.

You can however use the extension validator built into jqueryvalidation which will do exactly what you are trying to achive. See this link for reference and for examples:

http://jqueryvalidation.org/extension-method/