使用文件Upload防止jQuery AJAX调用的页面重定向

My jQuery AJAX code was running smoothly until I appended the following file field to it:

 'profile_pic'      : $('input[type=file]')[0].files[0])

All the other fields were text fields that were being received and processed just fine through the AJAX call. However, I had to include some code to handle the file uploaded (size, type) on the processing PHP file.

Now on clicking the submit button on the form, the entire page redirects to the PHP file (YES all the data is captured and committed to the database), rather than doing it through AJAX like it was before without redirecting the entire page. What could I have done wrong? Is there an extra parameter I need to put in to further prevent this redirect?

The jQuery AJAX call:

var formData = {
        'name'              : $('input[name=name]').val(),
        'email'             : $('input[name=email]').val(),
        'superheroAlias'    : $('input[name=superheroAlias]').val(),
        'profile_pic'       : $('input[type=file]')[0].files[0])
    };

    // process the form
    $.ajax({
        type        : 'POST', 
        url         : 'process.php', 
        data        : formData, 
        dataType    : 'json', 
        processData : false, 
        contentType : false, 
        encode      : true
    })

The code to handle the file upload:

$target_dir = "image_uploads/";
    $target_file = $target_dir .rand(1,999). basename(str_replace(" ","",$_FILES["profile_pic"]["name"]));
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
    // Check if image file is an actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["profile_pic"]["tmp_name"]);
        if($check !== false) {
            $uploadOk = 1;
        } else {
            $uploadOk = 0;
        }
    }
    // Check if file already exists
    if (file_exists($target_file)) {
        $uploadOk = 0;
    }
    // Check file size
    if ($_FILES["profile_pic"]["size"] > 500000) {
        $uploadOk = 0;
    }
    // Allow certain file formats
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
    && $imageFileType != "gif" ) {
        $uploadOk = 0;
    }
    // Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
    // if everything is ok, try to upload file
    } else {
        move_uploaded_file($_FILES["profile_pic"]["tmp_name"], $target_file);
    }

Actually for sending the form data to the back-end, you don't need to create an object like this. Here you are adding each input values individually. Its not a good manner. You know, how the code will looks like if there is 100 fields in your form ?

Yeah, you can use FormData for getting all the input values from a form. So changing your code as below:

var formData = new FormData(document.getElementById('#your-form-id'));

// process the form
$.ajax({
    type        : 'POST', 
    url         : 'process.php', 
    data        : formData, 
    dataType    : 'json', 
    processData : false, 
    contentType : false, 
    encode      : true
})