使用croppie.js ajax php jquery 裁剪和上传照片

Question

我正在使用一个名为croppie 的jquery 裁剪插件在用户将图像上传到数据库之前裁剪图像，但由于某种原因，图像被插入到上传文件夹中，但sql 查询不起作用。请问谁能帮帮我

html 标记。

<input type="file" id="upload">
<br/>
<button class="btn btn-success upload-result">Upload Image</button>

用于裁剪照片并使用ajax发送到testcrop.php的js。

$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});

$('#upload').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function () {
            console.log('jQuery bind complete');
        });

    }
    reader.readAsDataURL(this.files[0]);
});

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

        $.ajax({
            url: "components/testcrop.php",
            type: "POST",
            data: {"image": resp},
            success: function (data) {
                if (data == 'Image Uploaded Successfully') {
                    html = '<img src="' + resp + '" />';
                    $("#upload-demo-i").html(html);
                } else {
                    $("body").append("<div class='upload-error'>" + data + "</div>");

                }
            }
        });
    });
});

testcrop.php

<?php
session_start();
require('../includes/settings.php');

$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time() . '.png';

if ((($data == "image/gif") || ($data == "image/jpeg") || ($data == "image/jpg") || ($data == "image/pjpeg") || ($data == "image/x-png") || ($data == "image/png"))) {

    if ($data["error"] > 0) {
        echo "No Picture upload";
    } else {

        if (file_exists("../uploads/" . $data)) {
            echo 'This picture already exists';
        } else {
            file_put_contents('upload/' . $imageName, $data);
            $sql = "INSERT INTO " . $table_for_images . " (user_id, img_name, img_loc)
                       VALUES
                       ('" . $_SESSION['user_id'] . "',
                       '" . $ImageName . "',
                       'uploads/" . $data . "')";

            if (mysqli_query($con, $sql)) {
                echo "Image Uploaded Successfully";
            } else {
                echo('Something went wrong');
            }
        }
    }
} else {
    echo('Something went wrong');
}
?>

Answer 1

您只需在查询中将 $data 替换为 $imageName。

$sql = "INSERT INTO " . $table_for_images . " (user_id, img_name, img_loc)
                   VALUES
                   ('" . $_SESSION['user_id'] . "',
                   '" . $ImageName . "',
                   'uploads/" . $ImageName . "')";