Need fix on stopping page reloading after file uploading - php

Question

I'm trying to upload files to the server without page refresh. The uploading works but the page reloads after the uploading is done which is not what I wanted. I'm redirecting to an iframe ("myFrame") to stop the page reloading but it appears this doesn't work correctly. What did I do wrong?
HTML
<form id="upload" target="myFrame" action="sql/main-pix-upload.php" method="post" enctype="multipart/form-data">
<input id="main-pix" class="hidden" name="main_pix" type="file" onchange="uploadPix()" accept="image/*"/>
<label class="gi gi-camera mb-0 text-white" for="main-pix" type="button" title="Change Picture"></label>
</form>
<iframe class="hidden" name="myFrame"></iframe>
SCRIPT
function uploadPix(){
var form = document.getElementById('upload');
form.onsubmit = function(e){
e.preventDefault()
var formData = new FormData(this);
$.ajax({
url: 'sql/main-pix-upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false
})
});
};
PHP
$account = $_SESSION['account'];
$order = $_SESSION['order'];
$id = $_SESSION['id'];
$pathPix = ('../accounts/'.$account.'/'.$order.'/pix/'.$id.'/');
if(!is_dir($pathPix)){
mkdir($pathPix, 0777, true);
}
$file_name = $_FILES['main_pix']['name'];
$file_size = $_FILES['main_pix']['size'];
$extension = pathinfo($file_name, PATHINFO_EXTENSION);
$new_name = "main-pix.png";
$temp = ($_FILES["main_pix"]["tmp_name"]);
$target_file = ($pathPix.$new_name);
if(0 < $_FILES['main_pix']['error']){
echo 'Error: ' . $_FILES['main_pix']['error'] . '<br>';
}else{
move_uploaded_file($temp, $target_file);
}

Answer 1

Either use:
form.onsubmit = function(e) {
e.preventDefault()
};
or:
form.addEventListener("submit", function(e) {
e.preventDefault();
});
And then you have to make the HTTP-Call by yourself using AJAX.