Отправка формы Ajax PHP с изображением и текстом

Я пишу приложение, которое позволяет моей жене добавлять свои рецепты в базу данных, которую я создал. У меня есть форма, настроенная как с текстом, так и с вводом файла для изображения. Он отлично работает, и она может загружать текст и изображение в базу данных. Теперь я пытаюсь добавить функцию, чтобы она могла его редактировать. Это та же самая точная форма, только данные передаются для обработки в другой файл PHP. Когда она нажимает кнопку «Изменить», все текстовые поля заполняются данными, полученными с сервера, и она может редактировать. При желании она также может добавить новую фотографию. Несмотря на то, что это та же форма, она не загружает изображение. Текст загружается нормально, но $_POST['recipeImage'] всегда пуст, когда я смотрю на объект, отправляемый на сервер (recipeImage: "");

Я сбит с толку и не понимаю, почему это не работает. Вот код:

ФОРМА HTML (ЗАГРУЗКА ИЗОБРАЖЕНИЯ ВНИЗ):

<div id = "editRecipeModal">
    <div class = "col-md-8">
        <div class = "card">
       <form action = "../PHP/modify_recipe.php" method = "POST" role = "form" class = "form-horizontal" enctype = "multipart/form-data" id = "editRecipeForm" name = "editRecipeForm">
                <input class = "form-control" type = "hidden" value = "" id = "creatorIdEdit" name = "creatorId">
                <input class = "form-control" type = "hidden" value = "" id = "recipeIdEdit" name = "recipeId" value = "">
                <div class = "card-header card-header-text" data-background-color = "purple">
                    <h4 class = "card-title"><i class = "far fa-edit"></i>&nbsp;Edit Recipe</h4>
                </div>
                <div class = "card-content"
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Recipe Name</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <input class = "form-control" type = "text" name = "name" maxlength = "150" id = "editRecipeName" required>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Prep Time</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <input class = "form-control" type = "number" name = "prepTime" id = "editPrepTime" required>
                                <span class = "help-block">Numbers Only. In minutes... ie: 120 Minutes</span>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Servings</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <input class = "form-control" type = "number" name = "servings" id = "editServings" required>
                                <span class = "help-block">Numbers Only...</span>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Calories</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <input class = "form-control" type = "number" name = "calories" id = "editCalories" required>
                                <span class = "help-block">Numbers Only</span>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Brief Description</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <textarea class = "form-control" name = "description" id = "editBriefDescription" rows = "5" required></textarea>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Ingredients</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <textarea class = "form-control" name = "ingredients" id = "editPasteIngredientsShow" rows = "20" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Recipe Steps</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <textarea class = "form-control" name = "directions" id = "editPasteStepsShow" rows = "20" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <label class = "col-sm-2 label-on-left">Search Tags</label>
                        <div class = "col-sm-9">
                            <div class = "form-group label-floating is-empty">
                                <label class = "control-label"></label>
                                <input class = "form-control" type = "text" id = "editTags" name = "tags" required>
                            </div>
                        </div>

                    </div><br> <br> <br> <br>
                    <div class = "row">
                        <div class = "col-md-12">
                            <div class = "row">
                                <div class = "col-lg-4 col-md-6 col-sm-3">
                                    <select class = "selectpicker" data-style = "btn btn-primary btn-round" title = "vegOrVegan" data-size = "7" id = "vegOrVeganEditSelect">
                                                    <option disabled selected>Dietary Restrictions</option>
                                                    <option value = "" name = "">None</option>
                                                    <option value = "T" name = "T">Vegetarian</option>
                                                    <option value = "VG" name = "VG">Vegan</option>
                                                </select>
                                    <input type = "hidden" id = "vegOrVeganEdit" name = "vegOrVegan">
                                </div>
                                <div class = "col-lg-4 col-md-6 col-sm-3">
                                    <select class = "selectpicker" id = "suggestedPairingEditSelect" data-style = "btn btn-primary btn-round" title = "Suggested Pairing" data-size = "7">
                                                    <option disabled selected>Suggested Pairing</option>
                                                    <option value = "" name = "">None</option>
                                                    <option value = "B" name = "B">Beer</option>
                                                    <option value = "WW" name = "WW">White Wine</option>
                                                    <option value = "RW" name = "RW">Red Wine</option>
                                                </select>
                                    <input type = "hidden" id = "suggestedPairingEdit" name = "suggestedPairing" value = "">
                                </div>
                                <div class = "col-lg-4 col-md-6 col-sm-3">
                                    <select class = "selectpicker" id = "" data-style = "btn btn-primary btn-round" title = "Some Other Attributes" data-size = "7">
                                                    <option disabled selected>Some Other Attributes</option>
                                                    <option value = "" name = "">None</option>
                                                    <option value = "B" name = "B">Beer</option>
                                                    <option value = "WW" name = "WW">White Wine</option>
                                                    <option value = "WW" name = "WW">Red Wine</option>
                                       </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class = "row">
                        <div class = "col-md-12" style = "text-align: center;">
                        </div>
                    </div>
                    <div class = "row" style = "width: 80%; margin: 0 auto;">
                        <div class = "col-sm-4"></div>
                        <div class = "col-sm-4" style = "text-align: center;">
                            <div class = "fileinput fileinput-new text-center" data-provides = "fileinput">
                                <div class = "fileinput-new thumbnail">
                                    <img src = "../assets/img/placeholder.jpg" alt = "...">
                                </div>
                                <div class = "fileinput-preview fileinput-exists thumbnail"></div>
                                <div>
                                    <span class = "btn btn-rose btn-round btn-file">
                                                    <span class = "fileinput-new">Select image</span>
                                    <span class = "fileinput-exists">Change</span>
                                    <input type = "file" name = "recipeImage" id = "recipeImageEdit" />
                                    </span>
                                    <a href = "#pablo" class = "btn btn-danger btn-round fileinput-exists" data-dismiss = "fileinput"><i class = "fa fa-times"></i> Remove</a>
                                </div>
                            </div>
                        </div>
                        <div class = "col-sm-4"></div>
                    </div>
                    <br><br>
                    <div class = "row">
                        <div class = "col-sm-2"></div>
                        <div class = "col-sm-4" style = " text-align: center; margin: 0; padding: 0;"><button class = "btn btn-primary btn-lg modRecButton" type = "submit" id = "submitRecipe">Submit Changes</button></div>
                        <div class = "col-sm-4 closePanel" style = "text-align: center; margin: 0; padding: 0;" id = "closePanel"><button type = "button" class = "btn btn-default btn-lg">Cancel Changes</button>
                        </div>
                        <div class = "col-sm-2"></div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

КОД AJAX

$(document).ready(function(e) {
    $("#editRecipeForm").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
            url: "../PHP/modify_recipe.php",
            type: "POST",
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function(response) {
                let parsedResponse = JSON.parse(response);
                let newObject = parsedResponse[0]
                if (parsedResponse == 'notModified') {
                    showErrorModal();
                }else{
                    reBuildAfterObjectChange(newObject.recipeId, parsedResponse);
                }
            },
            error: function() {
                showErrorModal();
            }
        });
    }));
});

КОД PHP

<?php
    include 'db_operations.php';
            if (isset($_POST['name'])&& isset($_POST['description']) && isset($_POST['ingredients'])&& isset($_POST['directions']) && isset($_POST['suggestedPairing'])  && isset($_POST['prepTime']) && isset($_POST['servings']) && isset($_POST['calories'])  && isset($_POST['vegOrVegan']) && isset($_POST['recipeId']) && isset($_POST['creatorId']))
            {
        $result = '';
        $name = $_POST['name'];
        $description = $_POST['description'];
        $ingredients = $_POST['ingredients'];     
        $ingredients = str_replace(';', '-', $ingredients);
        $ingredients = str_replace('\n', ';', $ingredients);
        $directions = $_POST['directions'];
        $directions = str_replace(';', '-', $directions);
        $directions = str_replace('\n', ';', $directions);          
        $suggestedPairing = $_POST['suggestedPairing'];
        $prepTime = $_POST['prepTime'];
        $servings = $_POST['servings'];
        $calories = $_POST['calories'];
        $vegOrVegan = $_POST['vegOrVegan'];
        $recipeId = $_POST['recipeId'];
        $creatorId = $_POST['creatorId'];
        $tags = $_POST['tags'];
        $time=time();
        $lastModified = (date("Y-m-d H:i:s", $time));

        modifyRecipe_recipes($name, $description, $ingredients, $directions, $suggestedPairing, $prepTime, $servings, $calories, $vegOrVegan, $lastModified, $creatorId, $recipeId, $tags);
            }

        if (isset($_POST['recipeImage'])){
            $size = $_FILES['recipeImage']['size'];

            if ($size > 0){
             $tmp_dir = $_FILES["recipeImage"]["tmp_name"];
            $tmpImg = $_FILES['recipeImage']['name'];
            $ext = strtolower(pathinfo($tmpImg, PATHINFO_EXTENSION));

            $recipeImage = rand(10000, 10000000).".".$ext;
            move_uploaded_file($tmp_dir, "../userRecipeImages/".$recipeImage);
            $sql = 'UPDATE recipes SET recipeImage = :recipeImage WHERE creatorId = :creatorId AND recipeId= :recipeId';
            $stmt = $conn->prepare($sql);       
            $stmt->bindParam(':creatorId', $creatorId, PDO::PARAM_STR);                       
            $stmt->bindParam(':recipeImage', $recipeImage, PDO::PARAM_STR);            
            $stmt->bindParam(':recipeId', $recipeId, PDO::PARAM_STR);            
            $stmt->execute();               

            }

        }


        $modifiedRecipeDate = getLastModified_recipes($lastModified, $creatorId);
        if ($modifiedRecipeDate === $lastModified) {
                $newObject = getSingleRecipeById_recipes($recipeId, $creatorId);
                echo json_encode($newObject);
        }
        else {
            $result = "notModified";
            echo json_encode($result);
        }


?>

вы должны найти файл в $ _FILES массив, а не в $_POST['recipeImage']

Jeff 12.03.2018 19:47

вы все равно сделаете это правильно позже, только `if (isset ($ _ POST ['recipeImage'])` неверно

Jeff 12.03.2018 19:50

..... Ага ... часы смотрели, и это было что-то глупое. Я ценю его!

Marcus Holden 12.03.2018 19:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы явно забыли поменять $_POST['recipeImage'] на $_FILES['recipeImage']

Файлы содержатся в глобальной переменной $_FILES, а не в $_POST.

Измените это

if (isset($_POST['recipeImage'])){

к

if (isset($_FILES['recipeImage'])){

Другие вопросы по теме