I want to retrieve image from database and show it in div in data model. I uploaded image save to images->vacancy folder. Now I want to show it when press a button. Every image name as 'vacancyid'.jpg format. I tried with following code. But I was unsuccessful.
<?php
require('dbconnection.php');
$sql="select * from vacancy";
$res=mysqli_query($conn,$sql);
if(mysqli_num_rows($res)>0){
while($row=mysqli_fetch_assoc($res)){
?>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<div class="bs-calltoaction bs-calltoaction-primary" id="jobvacancydiv<?php echo $row['vacancyid'];?>">
<div class="row">
<div class="col-md-9 cta-contents">
<form action="sendemail.php" enctype="multipart/form-data" method="post">
<h1 class="cta-title">Its a Call To Action</h1>
<div class="cta-desc">
<input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['company_name'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">
<input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%"><br>
<input type="text" id="email" name="email" value='<?= $row['email'];?>'><br>
<input type="file" name="uploaded_file" id="uploaded_file" class="text-center center-block well well-sm">
<input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
<button id="showimg" name="showimg" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
<?php
if(isset($_POST['showimg'])){
?>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div>
<?php
//$imageData = base64_encode($row['image']);
// Format the image SRC: data:{mime};base64,{data};
//$src = 'data:images/vacancy;base64,'.$imageData;
$src='images/vacancy'.$row['vacancyid'].'.jpg';
echo "<img src='".$src."'>";
?>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</form>
</div>
</div>
</div>
<script>
window.setInterval(function(){
var current = new Date();
var expiry = new Date("<?= $row['expdate'];?>");
if(current.getTime()>expiry.getTime()){
$('#jobvacancydiv<?php echo $row['vacancyid'];?>').hide();
}
else{
$('#jobvacancydiv<?php echo $row['vacancyid'];?>').show();
}
});
</script>
</div>
<?php
}
}
else{
echo mysqli_error($conn);
}
?>
Not sure how the image is referred here. data:images instead try the relative path where the image is stored on server.
Your requirement
You want to have two buttons in your HTML Form Page. One of the buttons is Apply that will send an email. The second button is named as Open Modal that opens a Modal with an image from predefined URL. This can be from the database as well that is fetched on HTML Form Page Load. It has nothing to do with the HTML File Input Field in the Form.
Problem You Faced
The Modal was not showing when Open Modal Button was clicked.
In your code, you had your Modal in a PHP Condition that will only trigger if the below condition meets
if(isset($_POST['showimg'])) {
Proposed Solution
The above code will not work due to the reason that $_POST will only work when an information is passed to this page via POST method. This is only possible in action script of an HTML Form. Since your Modal is not depending on any information POSTED and should show on Button click, so simply use the below code instead.
<form action="sendemail.php" enctype="multipart/form-data" method="post">
<h1 class="cta-title">Its a Call To Action</h1>
<div class="cta-desc">
<input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['company_name'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">
<input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%"><br>
<input type="text" id="email" name="email" value='<?= $row['email'];?>'><br>
<input type="file" name="uploaded_file" id="uploaded_file" class="text-center center-block well well-sm">
<input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
<button id="showimg" name="showimg" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div>
<?php
$imageData = base64_encode($row['image']);
// Format the image SRC: data:{mime};base64,{data};
$src = 'data:images/vacancy;base64,'.$imageData;
echo "<img src='".$src."'>";
?>
</div>
</div>
</div>
</div>
</div>
</form>
The only change in this code and yours is that I have taken out the Modal from all the conditions.
Hope this helps.
Remove <?php if(isset($_POST['showimg'])){ ?> and use echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>'; ?>
<?php
require('dbconnection.php');
$sql = "select * from vacancy";
$res = mysqli_query($conn, $sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_assoc($res)) {
?>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<div class="bs-calltoaction bs-calltoaction-primary" id="jobvacancydiv<?php echo $row['vacancyid']; ?>">
<div class="row">
<div class="col-md-9 cta-contents">
<form action="sendemail.php" enctype="multipart/form-data" method="post">
<h1 class="cta-title">Its a Call To Action</h1>
<div class="cta-desc">
<input type="text" value='<?= $row['catogary']; ?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['company_name']; ?>' readonly
style="width: 75%"><br><br>
<input type="text" value='<?= $row['location']; ?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['qulification']; ?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['catogary']; ?>' readonly style="width: 75%"><br><br>
<input type="text" value='<?= $row['indate']; ?>' readonly style="width: 37.5%">
<input type="text" value='<?= $row['expdate']; ?>' readonly style="width: 37.5%"><br>
<input type="text" id="email" name="email" value='<?= $row['email']; ?>'><br>
<input type="file" name="uploaded_file" id="uploaded_file"
class="text-center center-block well well-sm">
<input type="submit" id="btn" name="btn" class="btn btn-primary" value="Apply"></input>
<button id="showimg" name="showimg" type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div>
<?php
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>';
?>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
window.setInterval(function () {
var current = new Date();
var expiry = new Date("<?= $row['expdate'];?>");
if (current.getTime() > expiry.getTime()) {
$('#jobvacancydiv<?php echo $row['vacancyid'];?>').hide();
}
else {
$('#jobvacancydiv<?php echo $row['vacancyid'];?>').show();
}
});
</script>
</div>
<?php
}
} else {
echo mysqli_error($conn);
}
?>