0
我使用了一个名为croppie的jquery crop插件在用户将图像上传到数据库之前裁剪图像,但由于某种原因,图像被插入上传文件夹但sql查询不起作用。请谁能帮我出去使用croppie.js裁剪和上传照片ajax php jquery
的HTML标记。
<input type="file" id="upload">
<br/>
<button class="btn btn-success upload-result">Upload Image</button>
js裁剪并发送照片到ajax的testcrop.php。
$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');
}
?>
可能值得使用代码片段来展示,以便人们可以看到上下文。 –