Javascript 如何使用Ajax将图像存储到文件夹并存储到数据库的路径？

我正在开发一个应用程序，前端使用HTML和js，后端使用PHP。我有下面的代码，应该有以下功能：1，当点击背景图像时，用户可以从手机中选择照片作为新的背景图像，并使用PHP将图像保存在服务器上，获取图像路径，将路径存储到数据库中，然后用JSON将新路径发送回前台，并将所选图像显示为新的背景图像。谢谢你的帮助

用于发送和检索数据的javascript：

function UploadImageDialog()
    {
        $("#newProfileImage").click();
    }
    function profileImageSelected(fileInput)
    {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "UploadProfileImage.php", true);
        var formData = new FormData();
        formData.append("file", fileInput.files[0]);
        xhr.send(formData);
        xhr.onload = function() {
        alert(xhr.responseText); //test the returned info from PHP.
        if(xhr.responseText != ""){
            $("#profileBackgroundImage").setAttribute("src", xhr.responseText);
        }
        else
        {
            alert("Your file failed to upload");
        }
    }
}

调用javascript的HTML代码：

<div style="width:91.5vw;height:78.5vh;margin-top:10.5vh;">
    <img class="backgroundImage" id="pictureSrc" src="img/Jenny.jpg" onclick="UploadImageDialog()" />
</div>
<input type="file" id="newProfileImage" style="display:none;" onchange="profileImageSelected(this)"/>

获取路径的PHP代码：

<?php
if(is_uploaded_file($_FILES['file']['tmp_name'])) // if user uploads file
{
    if (!file_exists("./img/EventImages/" . $_FILES["file"]["name"]))
    {
        if (move_uploaded_file($_FILES["file"]["tmp_name"], "./img/EventImages/" . $_FILES["file"]["name"]))
        {
            echo "img/EventImages/" . $_FILES["file"]["name"];
        }
    }
    else
    {
        echo "img/EventImages/" . $_FILES["file"]["name"];
    }
}
?>

---

您应该使用uploadify之类的库来上传文件，而无需发布表单

---

我已经弄明白了。代码没有问题，但我没有在服务器上正确设置目录权限。

可能值得一看是什么问题？什么不起作用？也许有帮助：@Vector我已经查看了你的链接，但我的PHP代码似乎有问题。我在PHP代码中添加了一些echo，发现move_上传的文件工作不正常。有什么想法吗？@Rudie我已经对代码进行了一部分一部分的测试，move\u uploaded\u file（）函数不起作用。