Question

我正在开发一个应用程序，它使用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"];
    }
}
?>

Answer 1

您应该使用像uploadify这样的库来上传文件而不张贴表单。

<强> DEMO

Answer 2

我已经想到了。代码没有任何问题，但我没有在服务器上正确设置目录权限。

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

2 个答案: