Upload com PHP+JQUERY em AJAX e na mesma página

Se você já perdeu horas procurando um código em PHP que funcionasse para fazer o upload de imagens mas que fizesse isso com AJAX e ainda por cima na mesma página, espero que esse post te ajude!

Crie uma pasta para armazenar as imagens que aqui chamo de upload. Copie e cole o código abaixo (testado com XAMPP localmente):

<?php
if(isset($_FILES['file']['name'])){
   /* Pega o nome do arquivo*/
   $filename = $_FILES['file']['name'];
   /* Local onde sera salvo o arquivo*/
   $location = "upload/".$filename;
   $imageFileType = pathinfo($location,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);
   /* Extensoes validas */
   $valid_extensions = array("jpg","jpeg","png");
   /* Checa a extensao do arquivo */
   if(in_array(strtolower($imageFileType), $valid_extensions)) {
      /* Faz o upload */
      move_uploaded_file($_FILES['file']['tmp_name'],$location);
   }
}
?>
<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="nome" value="Maria" />    
    <input type="file" name="file" />
    <button>Enviar</button>
</form>
<script>
$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function(response){
    alert('Upload realizado!');
},
        cache: false,
        contentType: false,
        processData: false
    });
});
</script>