Я храню изображение в виде BLOB-объекта в базе данных MySQL.При получении и загрузке я получаю значок разорванного изображения.Может быть, есть проблема с JQuery Ajax или ее содержимое неполное?
Как это исправить?
Вот некоторые фрагменты кода на связанных страницах:
изменить профильстраница:
<!DOCTYPE html>
<html lang="en">
<?php require 'inc/head.view.php'; //HEAD ?>
<body>
<?php include 'inc/navbar.view.php'; //NAVBAR ?>
<div class="container">
<div class="container__mod--1">
<?php include 'inc/sidenav.view.php'; //SIDENAV ?>
</div>
<div class="container__mod--2">
<?php include 'inc/userarea.view.php'; //USERAREA ?>
</div>
<div class="container__mod--3">
<main class="p-rem1">
<form>
<div class="fgrp">
<button class="btn btn--primary change-image">Change Profile Image</button>
</div>
<div class="fgrp">
<label for="userBio">Bio</label>
<textarea name="userBio" id="userBio" class="textarea" value="<?= $userInfo->bio; ?>"></textarea>
</div>
<div class="fgrp">
<label for="userOccupation">Occupation</label>
<input type="text" class="text-input" id="userOccupation" value="<?= $userInfo->occupation; ?>">
</div>
<div class="fgrp">
<button class="btn btn--primary">Save Changes</button>
</div>
</form>
</main>
</div>
<div class="container__mod--4">...</div>
</div>
<div class="changeImageModal">
<div class="changeImageModal__main">
<i class="fa fa-window-close changeImageModal__closeBtn"></i>
<div class="changeImageModal__content">
<h2>Change Image</h2>
<form>
<div id="imgcontainer">
</div>
<input type="file" id="new-image" accept="image/*">
<div class="fgrp">
<button type="submit" id="crop-and-save" class="btn btn--primary">Crop and Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/scripts/toggleNav.js"></script>
<script src="assets/scripts/toggleSidenav.js"></script>
<script src="assets/scripts/toggleUserArea.js"></script>
<script src="assets/scripts/croppie.js"></script>
<script>
// document.querySelector('.change-image').addEventListener('click',function(){
// });
var el = document.querySelector('#imgcontainer');
var c = new Croppie(el, {
viewport: { width: 150, height: 150, type : 'circle' },
boundary: { width: 300, height: 300 },
showZoomer: false,
enableOrientation: true
});
document.querySelector('#new-image').addEventListener('change',function(){
var reader = new FileReader();
reader.onload = function(e){
c.bind({
url : event.target.result
})
}
reader.readAsDataURL(this.files[0]);
});
document.querySelector('#crop-and-save').addEventListener('click',function(e){
e.preventDefault();
c.result({
type : 'canvas',
size: 'viewport'
}).then(function(blob){
$.ajax({
url:'../proc/insertProfilePic.php',
type : 'POST',
data : {
'image' : blob
},
success : function(data){
console.log(data);
}
});
});
});
</script>
</body>
</html>
Вставить файл изображения
if(!isset($uid)){
die();
}
if(!isset($_POST['image'])){
die();
}
$user = new User($pdo);
$imgData = $_POST['image'];
$imageArray1 = explode(';',$imgData);
$imageArray2 = explode(',',$imageArray1[1]);
$data = base64_decode($imageArray2[1]);
$imageName = time() . '.png';
file_put_contents($imageName,$data);
$imageFile = addslashes(file_get_contents($imageName));
$user->insertProfilePic($uid, $imageFile);
echo $data;
unlink($imageName);
Страница просмотра профиля
<!DOCTYPE html>
<html lang="en">
<?php require 'inc/head.view.php'; //HEAD ?>
<body>
<?php include 'inc/navbar.view.php'; //NAVBAR ?>
<div class="container">
<div class="container__mod--1">
<?php include 'inc/sidenav.view.php'; //SIDENAV ?>
</div>
<div class="container__mod--2">
<?php include 'inc/userarea.view.php'; //USERAREA ?>
</div>
<div class="container__mod--3">
<main>
<!--Page content goes here-->
<img src="data:image/png;base64,<?= base64_encode($profile->profileImage); ?>"></img>
</main>
</div>
<div class="container__mod--4">...</div>
</div>
<!-- Scripts -->
<script src="assets/scripts/toggleNav.js"></script>
<script src="assets/scripts/toggleSidenav.js"></script>
<script src="assets/scripts/toggleUserArea.js"></script>
</body>
</html>
Результат (разбитое изображение вверху слева)
