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

我有一个表单，允许用户输入有关照片的详细信息，并上传图像。我需要通过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);
            }
        });
    });

});

$（“#上载按钮”）。单击（函数（）{
var name=$（'#photoname'）.val（）；
var desc=$（'#photodesc'）.val（）；
var date=新日期（$（'#photodate'）.val（））；
day=''+date.getDate（）；
月份=“”+（date.getMonth（）+1）；
年份=日期。getFullYear（）；
如果（月长<2）{
月份='0'+月份；
}
如果（日长<2）{
天='0'+天；
}
变量日期=[年、月、日].join（'-'）；
var street=$（“#photostreet”）.val（）；
var city=$（“#光电池”）.val（）；
var country=$（“#photocountry”）.val（）；
var pc=$（'#photopc'）.val（）；
var pubpri=$（'input[name=display]：checked'）.val（）；
$（'#photofile'）.change（函数（e）{
var file=this.files[0]；
var form=new FormData（）；
格式。追加（'名称'，名称）；
表格.附加（'desc'，desc'）；
表格。附加（“日期”，日期）；
附加表格（“街道”，街道）；
表格。附加（‘城市’、城市）；
表格。附加（‘国家’、国家）；
附加表格（“pc”，pc）；
格式。追加（'pubpri'，pubpri）；
form.append（'photofile'，file）
$.ajax({
类型：“POST”，
url:“upload.php”，
cache:false，
contentType:false，
processData:false，
数据：表格，
成功：功能（响应）{
$（'#上传错误'）.html（响应）；
}
});
});
});

以下是我为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";

---

您的问题是什么？我想知道如何获得用户在表单中输入的内容，然后通过ajax请求发送到PHP文件。目前，我在PHP文件中没有收到回音的响应，也没有错误。