我的脚本正在运行,因为它在HTML div中显示上传和裁剪的图像。
将图像上传到文件夹中的PHP并在mysql数据库中包含图像的步骤是什么?
CropBox:https://github.com/hongkhanh/cropbox
<?php
// Image avatar update
if (isset($_POST['submitavatar'])){
$name = $_FILES["fileToUpload"]["name"];
$name = mt_rand(100000, 999999).$name;
$uploadtmp = $_FILES["fileToUpload"]["tmp_name"];
$target_dir = "avatarprofile/";
$target_file = $target_dir . basename($name);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
$name = preg_replace("#[^a-z0-9.]#i", "", $name);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
$updateavatar = $name;
$sql = "UPDATE users SET avatar = '$updateavatar' WHERE userID = $user";
$result = $con->query($sql);
$img= $_SESSION["avatar"];
unlink("./avatarprofile/$img");
header('Location: profile-settings-avatar.php');
} else {
echo "Sorry, there was an error uploading your file.";
}
}
}
?>
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
<input type="file" name="fileToUpload" id="file" style="float:left; width: 250px">
<input type="button" id="btnCrop" value="Crop" style="float: right">
<input type="button" id="btnZoomIn" value="+" style="float: right">
<input type="button" id="btnZoomOut" value="-" style="float: right">
</div>
<form action="profile-settings-avatar.php" method="POST" enctype="multipart/form-data">
<div type="file" class="cropped">
</div>
<input type="submit" id="uploadimagebutton" value="Upload" name="submitavatar">
</form>
</div>
链接javasript:https://github.com/hongkhanh/cropbox
答案 0 :(得分:0)
您需要将图像作为blob
(二进制大对象)。
CropBox支持两种方法,如文档中所述:
将图像作为blob获取后,通过Ajax将其发送到服务器,您可以将其保存到文件系统/数据库。
这样的事情可以胜任:
// Executed when clicking a save button for example
function saveImageToServer() {
var formData = new FormData();
formData.append('croppedImage', cropper.getBlob());
$.ajax('upload.php', {
method: "POST",
data: formData,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
});