pass value from input=file within a jquery submitHandler

Question

I have created a form which takes certain input fields and allows a user to upload a file. The form rows are dynamically added by the users. I have used the jquery validation plugin with my form for validation purposes

The problem is i am unable to get the files which has been selected by the users. but all the other fields are being passed.

HTML

<form id="upload">
<table class="dd" width="100%" id="data">

</table>
<input name="sub" type="submit"  value="Submit values"/>    <input type="button" id="addnew" name="addnew" value="Add new row" /> 

</form>

JavaScript

$(document).ready(function() {
    var currentItem = 1;
    $('#addnew').click(function(){
        currentItem++;
        $('#items').val(currentItem);
        var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year[]"  ><option value="2012">2012</option><option value="2011">2011</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week[]" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%">&nbsp;</td><td colspan="2">&nbsp;</td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual[]"  type="text" /></td><td width="7%">PDF</td> <td width="3%">: <input id="uploadfile1" name="userfile[]" accept="application/pdf" class="btn btn-next upload" type="file" required></td></tr>';
       $('#data').append(strToAdd);

    });
    $("#upload").validate({
        submitHandler: function (form) { 
            $.ajax({
                url: '<?php echo base_url(); ?>/ajax_upload',
                type: 'POST',
                data: $(form).serialize(),
                success: function(data) {
                    if(data){
                        alert("success");
                    } else {
                        alert("error");
                    }
                },
                error: function(data){
                    alert("error");
                },
                cache: false,
                contentType: false,
                processData: false
            });
            return false;
        }
    });
});

I have made a test fiddle

Any help will be appreciated.

Answer 1

make the form tag as follows

<form id="upload" action="#" method="POST" enctype="multipart/form-data" >

hope this works

Answer 2

You are not using enctype with form
try

<form id="upload" action="#" method="POST" enctype="multipart/form-data">