PHP：将画布图像上传到服务器，并将图像目录保存到数据库

Question

i am new in PHP and web development in general. I want to upload an image from an HTML canvas to server and save its location to my database, but for some reason that i could not point, it fails to do so. Uploading the image to server works just fine, but i am having a problem with saving its location.

My code:

    //javascript to pass canvas data to php
    <script>
        function uploadEx() {
            var canvas = document.getElementById("canvas");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form1"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload_data.php', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                    alert('Succesfully uploaded');
                }
            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };
    </script>

PHP Code:

<?php
//upload image to server
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
echo "" . $file

//save the location to database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "signatures";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$escapedString = mysqli_real_escape_string($conn,$file);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO signatures (imagePath)
VALUES ('".$escapedString."')";

if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Is there something wrong with my code that i fail to see? Thanks in advance!

Answer 1

Make sure you have the permission of the upload directory.

(Linux: chmod -R 777 /path/to/upload)

Answer 2

I am sorry, i am really embarrassed. Turns out, my code was working perfectly fine. I just forgot to turn to the last page of my database, the newly inserted records was there all those time!