使用jQuery验证插件，输入类型=文件未传递到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/

Answer 2

Before trying any harder, it is not supported by all browsers to submit a file with AJAX. You can however do a trick which is actually submitting the form to a target iframe and then using javascript to read the contents of that iframe and show/use them somehow. This way you actually submitted the form without refreshing the main window.

This article quite covers it: Ajax: a simplified version of file upload form using IFRAME