Why is page reloading/refreshing after uploading image - php

Question

I don't get it, I have no redirects in the code whatsoever, yet the page is refreshed after the image gets uploaded to the folder and displayed in the page.
profile.php
<?php
echo "<img src='".$imagepath."?".mt_rand()."' id='theimgsource'>";
?>
<form method="post" enctype="multipart/form-data" id="pictureform" action="javascript:void(0)">
<label for="thefile" id="labelprofile">
<i class="fa fa-2x fa-camera"></i>
</label>
<input type="file" name="file" id="thefile" style="display: none;">
<div id="uploadMessage"></div>
</form>
jquery
$(document).ready(function() {
$("#thefile").change(function(event) {
event.preventDefault();
var formData = new FormData(document.getElementById("pictureform"));
$.ajax({
url: '../content/upload.php',
type: 'post',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
console.log(data);
$response = data;
console.log($response);
if (data) {
$('#uploadMessage').html("Image uploaded successfully!");
$('#theimgsource').attr("src", "../uploads/" + data);
} else {
$('#uploadMessage').html("There was an error uploading the image");
}
},
});
});
});
upload.php
<?php
session_start();
include_once "../includes/dbh.inc.php";
require_once "../includes/functions.inc.php";
$id = $_SESSION["userid"];
$file = $_FILES["file"];
$fileName = $_FILES["file"]["name"];
$fileTmpName = $_FILES["file"]["tmp_name"];
$fileSize = $_FILES["file"]["size"];
$fileError = $_FILES["file"]["error"];
$fileType = $_FILES["file"]["type"];
$fileExt = explode(".", $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = ["jpg", "jpeg", "png"];
if (in_array($fileActualExt, $allowed)) {
if ($fileError === 0) {
if ($fileSize < 500000) {
$fileNameNew = "profile" . $id . "." . $fileActualExt;
$fileDestination = "../uploads/" . $fileNameNew;
foreach (glob("../uploads/profile{$id}.*") as $match) {
unlink($match);
}
move_uploaded_file($fileTmpName, $fileDestination);
$id = $_SESSION["userid"];
$sql = "UPDATE users SET imagepath = ? WHERE users_id = ?";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo '<script>alert("There was an error with the SQL statement")</script>';
}
mysqli_stmt_bind_param($stmt, "ss", $fileDestination, $id);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
profileStatus($conn, $id);
echo $data = $fileDestination;
} else {
echo '<script>alert("File is too big!")</script>';
}
} else {
echo '<script>alert("There was an error uploading your file!")</script>';
}
} else {
echo '<script>alert("Wrong type of file!")</script>';
}
I am able to upload the picture in the uploads/ folder as well as the picture being displayed on the page, however as soon as it is displayed the page reloads itself. event.preventDefault() does not seem to work and as far as I can tell there are no redirects in this code. I have tried to look up other answers but nothing useful for my case.