How to store image to folder and store the path to database using Ajax?

Question

I am developing an application that use HTML and js for front-end and PHP for back-end. I have the following code which should have the functions that: 1, when click on the background image, user can choose photo from there phone as new background image, and use PHP to save the image on server and get the image path, store the path into database, then send new path back to front with JSON, and display the selected image as new background image. Thanks for any help.

javascript for sending and retrieve data:

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");
        }
    }
}

HTML code to call the javascript:

<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 code to get the path:

<?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"];
    }
}
?>

Might be worth looking at http://stackoverflow.com/questions/450876/upload-image-to-server-using-php-store-file-name-in-a-mysql-database-with-othe — Kevin Lynch, Oct 27 '14 at 19:51
Maybe helpful: http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html — Rudie, Oct 27 '14 at 20:08
@Vector I have looked your link, but seems like there's something wrong with my PHP code. I have add some echo in my PHP code, and found that the move_uploaded_file did not work fine. Any idea? — Duke Wang, Oct 28 '14 at 15:01
@Rudie I have test the code part by part and the move_uploaded_file() function doesn't work. — Duke Wang, Oct 28 '14 at 15:05

score 1 · Answer 1 · answered Oct 27 '14 at 20:04

1

You should use some libraries like uploadify to upload files without posting form.

DEMO

answered Oct 27 '14 at 20:04

Apul Gupta

3,044
3
22
30

score 1 · Answer 2 · answered Oct 28 '14 at 15:37

1

I have figured that out. There was nothing wrong with the code, but I didn't set the Directory Permission correctly on the server.

answered Oct 28 '14 at 15:37

Duke Wang

83
3
10

How to store image to folder and store the path to database using Ajax?

2 Answers2