страница обновляется после вызова ajax, при использовании метода «move_uploaded_file» в php-скрипте

Question

Я хочу загрузить файлы, поместив их в div -элемент.Мой ajax-вызов выглядит следующим образом:

$.ajax({
        type: "POST",
        url: "upload.php",
        data: formData,
        processData: false,
        contentType: false
    }).done(function(response){
        alert(response);
    });

мой upload.php выглядит следующим образом:

$filename = basename($_FILES["file"]["name"]);
$target_path = $directory . basename($_FILES["file"]["name"]);
$target_file = $_FILES["file"]["tmp_name"];
//[some sql here]
move_uploaded_file($target_file, $target_path);
echo $target_path;

Сбрасывание файла в элемент div загружает его на сервер ивводит данные в мою базу данных, но также обновляет страницу index.php.Когда я удаляю строку move_uploaded_file($target_file, $target_path);, страница больше не обновляется.Желаемый результат - загрузка файла на сервер, ввод данных в базу данных и обновление файла index.php.

Также выводит весь мой файл upload.js на случай, если я пропустил что-то очевидное:

$(document).ready(function(){
    $("#dropArea").on("dragover", function(e){
        e.preventDefault();
        e.stopPropagation();
    })
    $("#dropArea").on("dragenter", function(e){
        e.preventDefault();
        e.stopPropagation();
    })
    $("#dropArea").on("drop", function(e){
        e.preventDefault();
        e.stopPropagation();
        let dataTransfer = e.originalEvent.dataTransfer
        let files = dataTransfer.files;
        let formData = new FormData();
        ([...files]).forEach(function(element){
            formData.append("file[]", element);
        });
        $.ajax({
            type: "POST",
            url: "pages/uploadScript.php",
            data: formData,
            processData: false,
            contentType: false
        }).done(function(response){
            alert(response);
        });
    });
});