Javascript AJAX - 发送图像文件输入和文本输入到PHP文件以插入到SQL数据库

Question

我有一个表单，允许用户输入有关照片的详细信息并上传图像。我需要通过Javascript文件获取所有输入，然后发送到PHP文件，其中数据存储在数据库中，图像存储在文件中。我真的不太确定如何解决这个问题。

以下是我的HTML表单：

            <form action="index.php" method="post" autocomplete="off">

                <div id="upload-header">
                    <h2>Upload Photo</h2>

                    <svg class="close-icon" width="12px" height="12px" viewPort="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <line x1="1" y1="11" x2="11" y2="1" stroke="black" stroke-width="2"/>
                        <line x1="1" y1="1" x2="11" y2="11" stroke="black" stroke-width="2"/>
                    </svg>
                </div>

                <div class="divider"></div>
                <p>Upload a new photograph to the system.</p>

                <div class="field-wrap">
                    <input type="text" id="photoname" class="field-style" name="PhotoName" placeholder="Photograph name"/>
                </div>

                <div class="field-wrap">
                    <input type="text" id="photodesc" class="field-style" name="PhotoDesc" placeholder="Photograph description"/>
                </div>

                <div class="field-wrap">
                    <label for="dob">Date taken</label>
                    <input type="date" id="photodate" class="field-style" name="photodate"/>
                </div>

                <div class="field-wrap">
                    <input type="text" id="photostreet" class="field-style" name="photostreet" placeholder="Street"/>
                </div>

                <div class="field-wrap">
                    <input type="text" id="photocity" class="field-style" name="photocity" placeholder="City"/>
                </div>

                <div class="field-wrap">
                    <input type="text" id="photocountry" class="field-style" name="photocountry" placeholder="Country"/>
                </div>

                <div class="field-wrap">
                    <input type="text" id="photopc" class="field-style" name="photopc" placeholder="Postcode"/>
                </div>

                <div class="field-wrap">
                    <input type="radio" id="public" class="field-style" name="display" value="Public" checked/>
                    <label for="public">Public</label>
                </div>

                <div class="field-wrap">
                    <input type="radio" id="private" class="field-style" name="display" value="Private"/>
                    <label for="public">Private</label>
                </div>

                <div class="field-wrap">
                    <input type="file" id="photofile" class="field-style" name="photofile" accept=".jpg"/>
                </div>

                <div id="upload_error"></div>

                <button class="button upload-button" type="button"id="upload-button" name="upPhoto"/>Upload</button>

            </form>

这是我的Javascript：

            $("#upload-button").click(function() {

    var name = $('#photoname').val();
    var desc = $('#photodesc').val();
    var date = new Date($('#photodate').val());
    day = '' + date.getDate();
    month = '' + (date.getMonth() + 1);
    year = date.getFullYear();
    if (month.length < 2) {
        month = '0' + month;
    }
    if (day.length < 2) {
        day = '0' + day;
    }
    var date = [year, month, day].join('-');
    var street = $('#photostreet').val();
    var city = $('#photocity').val();
    var country = $('#photocountry').val();
    var pc = $('#photopc').val();
    var pubpri = $('input[name=display]:checked').val();

    $('#photofile').change(function(e) {
        var file = this.files[0];
        var form = new FormData();
        form.append('name', name);
        form.append('desc', desc);
        form.append('date', date);
        form.append('street', street);
        form.append('city', city);
        form.append('country', country);
        form.append('pc', pc);
        form.append('pubpri', pubpri);
        form.append('photofile', file)

        $.ajax({
            type: "POST",
            url: "upload.php",
            cache: false,
            contentType: false,
            processData: false,
            data: form,
            success: function(response) {
                $('#upload-error').html(response);
            }
        });
    });

});

以下是我为PHP文件创建的仅用于测试起始变量的内容：

<?php

session_start();

// Load DB config and connect to the database
include 'db.php';
$con = mysqli_connect($host, $user, $password, $db);

// Get variables
$name = $_POST['name'];
$desc = $_POST['desc'];

echo "$name $desc";