I am storing small thumbnails in mariadb. I need to pull the thumbnails into an ajax popup. I can pull them up from local directory in the script but when I try to pull them from database, I get blob data filling screen. I can get them correctly using a single .php page using same base64 call but using same code in ajax won't correct thumb using base64.
Code that works on single php page:
Test.php
<?php
// Include the database configuration file
require_once 'dbcon.php';
// Get image data from database
$result = $conn->query("SELECT thumbnail FROM employee ORDER BY id ASC");
?>
<?php if($result->num_rows > 0){ ?>
<div class="gallery">
<?php while($row = $result->fetch_assoc()){ ?>
<img src="data:image/jpg;charset=utf8;base64,<?php echo base64_encode($row['thumbnail']); ?>" />
<?php } ?>
</div>
<?php }else{ ?>
<p class="status error">Image(s) not found...</p>
<?php } ?>
same code in ajax that won't work:
fetch_data.php
<?php
include('dbcon.php');
if(isset($_POST["id"]))
{
$result = $conn->query("SELECT * FROM employee WHERE id = '".$_POST["id"]."'");
$output = '';
foreach($result as $row)
{
$output .= '
<p align="center"><img src="data:image/jpg;charset=utf8;base64,<?php echo base64_encode('.$row["thumbnail"].'); ?>" />
<p>Name : '.$row["name"].'</p>
<p>Name : '.$row["position"].'</p>
<p>Name : '.$row["office"].'</p>
<p>Name : '.$row["age"].'</p>
<p>Name : '.$row["salary"].'</p>';
}
echo $output;
}
?>
Index.php that posts to fetch_data.php
<!DOCTYPE html>
<html>
<head>
<? header('Content-Type: image/jpeg'); ?>
<title>Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div class="container">
<br />
<h3 align="center">Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database</a></h3><br />
<br />
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="60">Photo</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<?php
include('dbcon.php');
$result = $conn->query("SELECT * FROM employee ORDER BY id ASC");
foreach($result as $row)
{
echo '
<tr>
<td><a href="..\..\gck\includes\display.php?id='.$row["id"].'" id="'.$row["id"].'" title=" "><img src="data:image/jpg;charset=utf8;base64,'. base64_encode($row["thumbnail"]) . '" height="80" width="80" /></a></td>
<td>'.$row["name"].'</td>
<td>'.$row["position"].'</td>
<td>'.$row["office"].'</td>
<td>'.$row["age"].'</td>
<td>'.$row["salary"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('a').tooltip({
classes:{
"ui-tooltip":"highlight"
},
position:{ my:'left center', at:'right+50 center'},
content:function(result){
$.post('fetch_data.php', {
id:$(this).attr('id')
}, function(data){
result(data);
});
}
});
});
</script>
</body>
</html>
The line code
<img src="data:image/jpg;charset=utf8;base64,<?php echo base64_encode($row['thumbnail']); ?>" />"
pulls up the photo but doesn't convert blob to jpeg on index.php file but works fine on test.php file. Any thoughts? I tried putting header content-type: image/jpeg but it still brings up blob data in popup but works fine on test.php page.
see images of good/bad here: https://photos.app.goo.gl/8TWz2G42q7WYmEnM9