Опубликовать изображение через JQuery, останавливая страницу от обновления

Question

Страница не обновляется (что я хочу), однако там написано, что «recipeImage» не определено, есть идеи, как это исправить? Я установил enctype, но я не уверен, связано ли это с тем, как я передаю изображение через jquery. Любые предложения, чтобы попытаться это исправить?

jquery код:

$(document).ready(function() {
        $("#addRecipeForm").submit(function(event) {
            event.preventDefault();
            var recipeName = $("#recipeName").val();
            var recipeImage = $("#recipeImage").val();
            var recipeIngredients = $("#recipeIngredients").val();
            var recipeMethod = $("#recipeMethod").val();
            var prepTime = $("#prepTime").val();
            var cookTime = $("#cookTime").val();
            var serves = $("#serves").val();
            var privateRecipe = $("#privateRecipe").val();
            var addRecipe = $("#addRecipe").val();
            $(".formMessage1").load("inc/recipes.php", {
                recipeName: recipeName,
                recipeImage: recipeImage,
                recipeIngredients: recipeIngredients,
                recipeMethod: recipeMethod,
                prepTime: prepTime,
                cookTime: cookTime,
                serves: serves,
                privateRecipe: privateRecipe,
                addRecipe: addRecipe
            });
        });
    });

код формы:

<form method="POST" id="addRecipeForm" name="addRecipeForm" enctype="multipart/file-data">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <input autocomplete="off" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Recipe name" id="recipeName" name="recipeName">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="file" class="form-control-file" id="recipeImage" name="recipeImage">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" rows="6" placeholder="Ingredients" id="recipeIngredients" name="recipeIngredients"></textarea>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" rows="6" placeholder="Method" id="recipeMethod" name="recipeMethod"></textarea>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <input autocomplete="off" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Prep time" id="prepTime" name="prepTime">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input autocomplete="off" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Cook time" id="cookTime" name="cookTime">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input autocomplete="off" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Serves" id="serves" name="serves">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="privateRecipe" name="privateRecipe">
                                    <label class="form-check-label" for="exampleCheck1">Private recipe</label>
                                </div>
                            </div>
                            <div class="col-lg-10">
                                <button type="submit" class="btn btn-primary" style="width: 100%" id="addRecipe" name="addRecipe">Search recipe</button>
                            </div>
                        </div>
                        <p class="formMessage1"></p>
                    </form>

определение изображения в recipes.php:

$recipeImage = $_FILES['recipeImage'];

код, который я использую для загрузки фото

// setting file details
    $fileName = $recipeImage['name'];
    $fileTmpName = $recipeImage['tmp_name'];
    $fileSize = $recipeImage['size'];
    $fileError = $recipeImage['error'];
    $fileType = $recipeImage['type'];
    // getting and setting the extensions
    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));
    // setting the file extensions allowed
    $allowed = array("jpg", "jpeg", "png");

    if(!in_array($fileActualExt, $allowed)){
        echo "<span style='color: red;'>You cannot upload files of this type</span>";
    }elseif(!$fileError === 0){
        echo "<span style='color: red;'>There was an error uploading your file</span>";
    }else{
       $fileNameNew = uniqid('', true).".".$fileActualExt;
       $fileDestination = '../uploads/'.$fileNameNew;
       move_uploaded_file($fileTmpName, $fileDestination);
    }