The PHP file download does not work under jquery ajax form

This question already has an answer here:

• jQuery Ajax File Upload 20 answers

I am using ajax form to display form dynamically in which it contains the file upload option. I'm getting the post values of every text values but the File array is empty. I have executed print_r($_POST) and print_r($_FILES) to see the post data, the $_FILES Array is showing null value.

Here is the form I'm using.

<form class="form-3 form-horizontal ajxfrm" id="step-three" enctype="multipart/form-data" action="<?php echo $html->addLink(array('controller'=>'homes','action'=>'step_three_ajax')); ?>" method="post">
<div id="calendar">
    <div class="clear"></div>
    <div style="position:relative">
        <div class="control-group">
            <div class="control-label"><label class="control-label">Name</label></div>
            <div class="controls"><input id="name" type="text" name="name" /></div>
        </div>
    </div>
    <div style="position:relative">
        <div class="control-group">
            <div class="control-label">Email</div>
            <div class="controls"><input id="email" type="text" name="email" /></div>
        </div>
    </div>
    <div style="position:relative">
        <div class="control-group">
            <div class="control-label">Contact</div>
            <div class="controls"><input id="contact" type="text" name="contact" /></div>
        </div>
    </div>
    <div style="position:relative">
        <div class="control-group">
            <div class="control-label">Files<br/><span style="font-size:10px; font-style:italic">(Optional)</span></div>
            <div class="controls">
                <input id="fileupload" type="file" name="fileupload" /><br/>
            </div>
        </div>
    </div>
    <div style="position:relative">
        <div class="control-group">
            <div class="control-label">Your Message</div>
            <div class="controls"><textarea id="message" rows="3" name="message"></textarea></div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="submit">
    <input type="hidden" name="post" value="1"/>
    <input type="submit" class="btn green" value="Next"/>
</div>
</form>

Here is the ajax call

$('.ajxfrm').live('submit',function(){
    var thisObj = this;
    var submit = true;
    if('step-two'==$(thisObj).attr('id')){
        submit = stepTwo();
    }else if('step-three'==$(thisObj).attr('id')){
        submit = stepThree();
    }
    if(submit){
        $.ajax({
            type: "POST",
            data: $(thisObj).serialize(),
            url: $(thisObj).attr('action'),
            beforeSend: function(){
                showOverLayer();
            },
            success: function(data){
                $(thisObj).parent("#content").empty().html(data).hide().fadeIn(function(){
                    setBlocks();
                    setLiClick();
                    hideOverLayer();
                });
                changeCalNaviHref();
            }
        });
    }
    return false;
});

Here im calling the upload function using $booker->uploadfiles(); in controller here is the controller method function

public function step_three(){
    //save booking
    if(isset($_POST['post'])){
        $booker = new Booker();
        //create booker
        $_SESSION['userdat']['name']=$_POST['name'];
        $_SESSION['userdat']['email']=$_POST['email'];
        $_SESSION['userdat']['contact']=$_POST['contact'];
        $_SESSION['userdat']['message']=$_POST['message'];

        if($booker->setsessions($_SESSION['userdat']))
        {
            $booker->uploadfiles();
            $this->redirect(array('controller'=>'homes','action'=>'step_four'));
        }
        else
        {
            $this->setFlashMsg('Please Provide Valid Information','message-box ok');
        }
    }
}

here is the model function uploadfiles()

public function uploadfiles()
    {
    if(isset($_FILES['fileupload']))
    {
        $errors= array();
        foreach($_FILES['fileupload']['tmp_name'] as $key => $tmp_name )
        {
            print_r($_FILES);
            exit;
            $file_name = $key.$_FILES['fileupload']['name'][$key];
            $file_size =$_FILES['fileupload']['size'][$key];
            $file_tmp =$_FILES['fileupload']['tmp_name'][$key];
            $file_type=$_FILES['fileupload']['type'][$key];
            if($file_size > 2097152)
            {
                $errors[]='File size must be less than 2 MB';
            }
            $upload_dir = ROOT;
            $desired_dir="/uploads/";
            if(empty($errors)==true)
            {
                if(is_dir($desired_dir)==false)
                {
                    mkdir("$desired_dir", 0700); // Create directory if it does not exist
                }
            if(is_dir("$desired_dir/".$file_name)==false)
            {
                //$file_path=$upload_dir."$desired_dir/".$file_name;
                move_uploaded_file($file_tmp,$upload_dir."$desired_dir/".$file_name);
            }
            else
            {                                           // rename the file if another one exist
                $file_path=$upload_dir."$desired_dir/".$file_name.time();
                rename($file_tmp,$file_path) ;
            }
        }
        else
        {
            print_r($errors);
        }
    }
    if(empty($error))
    {
            //echo "Success"; exit;
            return true;
    }
    return false;
}

What am I missing here?

---

Try this.

$('.ajxfrm').live('submit',function(){
        var thisObj = $(this),
            submit = true;

        if('step-two'== thisObj.attr('id')){
            submit = stepTwo();
        }else if('step-three'== thisObj.attr('id')){
            submit = stepThree();
        }
        if(submit){
            $.ajax({
              type: "POST",
              data: thisObj.serialize(),
              url: thisObj.attr('action'),
              beforeSend: function(){
                 showOverLayer();
              },
              success: function(data){
                 thisObj.parent("#content").empty().html(data).hide().fadeIn(function(){
                     setBlocks();
                     setLiClick();
                     hideOverLayer();
                 });
                 changeCalNaviHref();
              }
            });
        }
    return false;
});

Can you show me one console.log(data) on the success method?