Отправка файла загрузки фотографий в объект JSON через AJAX

---

Я знаю, что в интернете уже есть сообщения, которые охватывают эту тему, но большинство примеров основаны на jQuery, и мне нужно сделать это на простом JavaScript. Я нашел несколько редких примеров JavaScript на эту тему

тема онлайн, но я не могу заставить ее работать в моей структуре кода. Если кто-нибудь может дать мне пример кода моего кода, то я буду очень признателен за это.

Это мой код.

index.php

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',sendUploadInfo);

function sendUploadInfo(){

var photo= document.querySelector('#photo-input').files[0];

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

x.php

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section
//$photo= $upload_info_json_object->photo; //<-????
///???

if(isset($_FILES['photo'])) {
$file=$_FILES['photo']['name'];
$location='images/'.$file;
move_uploaded_file($_FILES['photo']['tmp_name'],$location); 
}
//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

Что я уже пробовал:

Зашел на другие справочные сайты и не повезло, и не повезло с google.

---