undefined index when using ajax to upload file

Here is my html

<form id="uploadimage" name="form" action="" enctype="multipart/form-data">
    <input type="file" name="files" id="file"  />
    <input type="submit" value="Upload">
</form>

Here is My Javascript code

$(document).ready(function (e) {
    $("#uploadimage").submit(function(e) {
        e.preventDefault();
        $("#message").empty();
        $('#loading').show();
        $.ajax({
            url: "ajax_php_file.php", // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data:new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData:false,        // To send DOMDocument or non processed data file it is set to false
            success: function(data)   // A function to be called if request succeeds
            {
                $('#loading').hide();
                $("#message").html(data);
            }
        });
    });
});

I am trying to upload file using ajax. The javascript is sending the data to the php file correctly but the php code shows error undefined index files. So, can you tell what wrong am i doing?

Here php file code

<?php

if(isset($_FILES["files"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["files"]["name"]);
$files_extension = end($temporary);
if ((($_FILES["files"]["type"] == "image/png") || ($_FILES["files"]["type"] == "image/jpg") || ($_FILES["files"]["type"] == "image/jpeg")
) && ($_FILES["files"]["size"] < 8388608)//Approx. 100kb filess can be uploaded.
&& in_array($files_extension, $validextensions)) {
if ($_FILES["files"]["error"] > 0)
{
echo "Return Code: " . $_FILES["files"]["error"] . "<br/><br/>";
}
else
{
if (files_exists("upload/" . $_FILES["files"]["name"])) {
echo $_FILES["files"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$sourcePath = $_FILES['files']['tmp_name']; // Storing source path of the files in a variable
$targetPath = "uploaded images/".$_FILES['files']['name']; // Target path where files is to be stored
move_uploaded_files($sourcePath,$targetPath) ; // Moving Uploaded files
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>files Name:</b> " . $_FILES["files"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["files"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["files"]["size"] / 1024) . " kB<br>";
echo "<b>Temp files:</b> " . $_FILES["files"]["tmp_name"] . "<br>";
}
}
}
else
{
echo "<span id='invalid'>***files Size should be less than 2 MB *** </br>***Only png,jpg and jpeg are allowed files types.***<span>";
}
}

?>