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

【问题标题】：How to store image to folder and store the path to database using Ajax?如何使用 Ajax 将图像存储到文件夹并存储到数据库的路径？
【发布时间】：2014-10-27 19:46:32
【问题描述】：

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

【问题讨论】：

可能值得一看stackoverflow.com/questions/450876/…
有什么问题？什么不起作用？
也许有帮助：js1.hotblocks.nl/tests/ajax/file-drag-drop.html
@Vector 我查看了您的链接，但似乎我的 PHP 代码有问题。我在我的 PHP 代码中添加了一些回声，发现 move_uploaded_file 不能正常工作。有什么想法吗？
@Rudie 我已经逐部分测试了代码，但 move_uploaded_file() 函数不起作用。

标签： javascript php html json

【解决方案1】：

你应该使用像uploadify这样的库来上传文件而不用发布表单。

DEMO

【讨论】：

【解决方案2】：

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

【讨论】：