'Update Image Using AJAX PHP
I am facing an issue with updating image to database using AJAX and a Modal, following are the details: I have a main page named edit_employee.php, code below:
<!DOCTYPE html>
<?php
$ROOT='../../';
include('../config/db_connect.php');
require_once '../config/auth.php';
?>
<html lang="eng">
<head>
<title>Employee List | Employee Attendance Record System</title>
<?php include('../includes/header.php') ?>
</head>
<body>
<?php include('../includes/nav_bar.php') ?>
<div class="container-fluid admin" >
<div class="alert alert-success">Employee Center-Edit</div>
<div class="well col-lg-12 mt-5">
<!-- <button class="btn btn-success" type="button" id="new_emp_btn"><span class="fa fa-plus"></span> Add new </button> -->
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Joining Date</th>
<th>Picture</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$employee_qry=$conn->query("SELECT * FROM employee WHERE status='Active' ORDER BY employee_id ASC") or die(mysqli_error());
while($row=$employee_qry->fetch_array()){
?>
<tr>
<td><?php echo $row['employee_id']?></td>
<td><?php echo $row['first_name']?></td>
<td><?php echo $row['designation']?></td>
<td><?php echo $row['department']?></td>
<td><?php echo date("F d, Y", strtotime($row['doj'])) ?></td>
<td><img <?php echo 'src="data:image/jpeg;base64,'.base64_encode($row['picture'] ).'"' ?> height="50px" width="75px" /></td>
<td>
<center>
<button class="btn btn-sm btn-outline-success edit_employee" data-id="<?php echo $row['employee_id']?>" type="button"><i class="fa fa-edit"></i></button>
<button class="btn btn-sm btn-outline-danger remove_employee" data-id="<?php echo $row['employee_id']?>" type="button"><i class="fa fa-trash"></i></button>
</center>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
<!--MODALS-->
<?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/modals/modal_editemp.php'); ?>
<?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/modals/modal_deleteemp.php'); ?>
<!--MODALS END-->
</body>
<!--SCRIPTS-->
<?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php'); ?>
</html>
page has a button having class edit_employee which opens a modal on click, I used javascript and ajax for this (ajax contained in php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php')), below is the code for your reference:
<script>
$(document).ready(function(){
$('.edit_employee').click(function () {
var id=$(this).attr('data-id');
// AJAX request
$.ajax({
url: './functions/get_employee.php',
type: 'post',
data: {id:id},
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#editmodal').modal('show');
}
});
});
});
</script>
This opens a modal with some employee information and employee image, I put this modal in get_employee.php, code below for your reference:
<style>
label{
display: inline-block;
width: 155px;
text-align: right;
}
.form-control{
display: inline-block !important;
}
.profile-pic-div{
height: 120px;
width: 120px;
position: relative;
top: 100px;
left: auto;
margin-left: 350px;
transform: translate(-50%,-50%);
overflow: hidden;
border-top: 7px solid rgb(12, 189, 189);
display:table-cell;
}
#photo{
height: 100%;
width: 100%;
}
#file{
display: none;
}
#uploadBtn{
height: 30px;
width: 100%;
position: absolute;
top: 140px;
left: auto;
transform: translateX(-50%);
text-align: center;
background: rgba(0, 0, 0, 0.7);
color: wheat;
line-height: 30px;
font-family: sans-serif;
font-size: 15px;
cursor: pointer;
display: none;
z-index: 9999;
}
.col-auto img{
background-color:rgb(12, 189, 189);
width: 5%;
cursor: pointer;
padding: 3px;
}
</style>
<!-- PICTURE sCRIPT -->
<script type="text/javascript">
$(document).ready(function(){
$('#editmodal').on('hidden.bs.modal', function (e) {
location.reload();
});
});
//declearing html elements
const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
const uploadBtn = document.querySelector('#uploadBtn');
//if user hover on img div
imgDiv.addEventListener('mouseenter', function(){
uploadBtn.style.display = "inline-block";
});
//if we hover out from img div
imgDiv.addEventListener('mouseleave', function(){
uploadBtn.style.display = "none";
});
//lets work for image showing functionality when we choose an image to upload
//when we choose a foto to upload
file.addEventListener('change', function(){
//this refers to file
const choosedFile = this.files[0];
if (choosedFile) {
const reader = new FileReader(); //FileReader is a predefined function of JS
reader.addEventListener('load', function(){
img.setAttribute('src', reader.result);
});
reader.readAsDataURL(choosedFile);
}
});
</script>
<?php
$ROOT='../../';
include '../../config/db_connect.php';
$id=$_POST['id'];
include_once('../../config/db_connect.php');
if (!$conn) {
die('Could not connnect: ' . mysqli_error($conn));
}
$query="SELECT * FROM employee WHERE employee_id = '$id'";
$result = mysqli_query($conn,$query);
$row = $result->fetch_array();
?>
<div class="container-fluid">
<ul class="nav nav-tabs text-success" id="myTab">
<li class="nav-item">
<a class="nav-link text-info border_bottom border_bottom_info active" data-toggle="tab" href="#personal">Personal Information</a>
</li>
<li class="nav-item">
<a class="nav-link text-info" data-toggle="tab" href="#company">Company Information</a>
</li>
<li class="nav-item">
<a class="nav-link text-info" data-toggle="tab" href="#payroll">Payroll Information</a>
</li>
<li class="nav-item">
<a class="nav-link text-info" data-toggle="tab" href="#incentives">Benefits/Incentives</a>
</li>
</ul>
</div>
<div class="tab-content container-fluid" id="myTabContent">
<!--Personal Information-->
<div class="tab-pane fade show active" id="personal">
<div class="well col-lg-12" id="displaydata">
<!--CONTENT HERE-->
<div class="row">
<div class="col-lg-6 float-left">
<div class="col-auto mt-3">
<label for="" class="mr-2">First Name: </label>
<input type="text" class=" form-control w-50 " id="firstname" name="firstname" required value="<?php echo $row['first_name'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Last Name: </label>
<input type="text" class=" form-control w-50 " id="lastname" name="lastname" required value="<?php echo $row['last_name'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">CNIC Number: </label>
<input type="text" class=" form-control w-50 " id="cnic" name="cnic" required value="<?php echo $row['cnic'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Permanent Address: </label>
<input type="text" class=" form-control w-50 " id="paddress" name="paddress" required value="<?php echo $row['permanent_address'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Local Address: </label>
<input type="text" class=" form-control w-50 " id="laddress" name="laddress" required value="<?php echo $row['local_address'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Mobile Number: </label>
<input type="text" class=" form-control w-50 " id="mobile" name="mobile" required value="<?php echo $row['mobile'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Emergency Number: </label>
<input type="text" class=" form-control w-50 " id="emergency" name="emergency" required value="<?php echo $row['emergency_contact'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Qualification: </label>
<input type="text" class=" form-control w-50 " id="qualification" name="qualification" required value="<?php echo $row['qualification'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Date of Birth: </label>
<input type="date" class=" form-control w-50 " id="dob" name="dob" required value="<?php echo date('Y-m-d', strtotime($row['dob'])) ?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Blood Group: </label>
<select class="w-50 my-1 form-control" style="cursor:pointer;" id="bg">
<option selected><?php echo $row['blood_group'];?></option>
<option value="A+">A+</option>
<option value="O+">O+</option>
<option value="B+">B+</option>
<option value="AB+">AB+</option>
<option value="A-">A-</option>
<option value="O-">O-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
</select>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Special Notes: </label>
<input type="text" class=" form-control w-50 " id="sn" name="sn" required value="<?php echo $row['note'];?>">
</div>
</div>
<div class="">
<div class="form-group col-auto">
<label for="file" id="uploadBtn" class="mr-2">Employee Picture</label>
<div class="profile-pic-div">
<img <?php echo 'src="data:image/jpeg;base64,'.base64_encode($row['picture'] ).'"' ?> id="photo" >
<input type="file" name="ProfileImage" id="file" />
</div>
</div>
</div>
</div>
<div class="modal-footer mt-1">
<button data-id="<?php echo $row['employee_id'];?>" class="btn btn-success persinfo" name="persinfo" id="<?php echo $row['employee_id'];?>"><span class="glyphicon glyphicon-save"></span>Save & Next</button>
</div>
</div>
</div>
<!-- Company Information-->
<div class="tab-pane fade show" id="company">
<div class="well col-lg-12" id="displaydata1">
<!--CONTENT HERE-->
<div class="row">
<div class="col-lg-6 float-left">
<div class=" col-auto mt-3">
<label for="" class="mr-2">Employee ID: </label>
<input type="text" class=" form-control w-50 my-1 " name="employeeid" id="employeeid" required value="<?php echo $row['employee_id'];?>" disabled>
<!-- <img src="https://img.icons8.com/ios-filled/50/000000/settings.png" alt=""> -->
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Select Block: </label>
<select class="w-50 form-control" style="cursor:pointer;" id="sblock">
<option selected><?php echo $row['block'];?></option>
</select>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Select Department: </label>
<select class="w-50 form-control" style="cursor:pointer;" id="sdpt">
<option selected><?php echo $row['department'];?></option>
</select>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Select Designation: </label>
<select class="w-50 form-control" style="cursor:pointer;" id="sdesig">
<option selected ><?php echo $row['designation'];?></option>
</select>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Employee Type: </label>
<select class="w-50 form-control" style="cursor:pointer;" id="semptyp">
<option selected><?php echo $row['employee_type'];?></option>
</select>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Email: </label>
<input type="text" class=" form-control w-50 " id="email" name="email" required value="<?php echo $row['email'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Date of Joining: </label>
<input type="date" class=" form-control w-50 " id="doj" name="doj" required value="<?php echo date('Y-m-d', strtotime($row['doj']));?>">
</div>
</div>
<div class="col-lg-6 float-left">
<h5 class="mt-3 ml-3" style="color:#636c78;">Employee Shift Information</h5>
<div class="col-auto mt-3">
<label for="" class="mr-2">Set Shift: </label>
<select class="form-control w-50" style="cursor:pointer;">
<option selected><?php echo $row['shift'];?></option>
</select>
</div>
<?php
$shid=$row['shift'];
$query1="SELECT * FROM tbl_shifts WHERE shift_id ='$shid'";
$result1 = mysqli_query($conn,$query1);
$row1 = $result1->fetch_array();
?>
<div class="col-auto mt-1">
<label for="" class="mr-2">Start Time: </label>
<input type="time" class=" form-control w-50 " id="stime" name="stime" value="<?php echo date('H:i', strtotime($row1['st_tm']));?>" required>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">End Time: </label>
<input type="time" class=" form-control w-50 " id="etime" name="etime" value="<?php echo date('H:i', strtotime($row1['end_tm']));?>" required>
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Weekday: </label>
<select class="form-control w-50" style="cursor:pointer;">
<option selected><?php echo $row1['weekday'];?></option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
</div>
</div>
<div class="modal-footer mt-5">
<button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Next</button>
</div>
</div>
</div>
<!-- Payroll Information-->
<div class="tab-pane fade show" id="payroll">
<div class="well col-lg-12" id="displaydata1">
<!--CONTENT HERE-->
<?php
$empid=$row['employee_id'];
$query2="SELECT * FROM emp_salary WHERE employee_id ='$empid'";
$result2 = mysqli_query($conn,$query2);
$row2 = $result2->fetch_array();
?>
<div class="row">
<div class="col-lg-6 float-left">
<h5 class="mt-3 ml-3" style="color:#636c78;">Monthly Salary Information</h5>
<div class="col-auto mt-3">
<label for="" class="mr-2">Gross Salary: </label>
<input type="text" class=" form-control w-50 " id="gsalary" name="gsalary" placeholder="0" required value="<?php echo $row2['gross_salary'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Basic Salary: </label>
<input type="text" class=" form-control w-50 " id="bsalary" name="bsalary" placeholder="0" required value="<?php echo $row2['basic_salary'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">House Rent Allowance: </label>
<input type="text" class=" form-control w-50 " id="hra" name="hra" placeholder="0" required value="<?php echo $row2['hra'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Utility Allowance: </label>
<input type="text" class=" form-control w-50 " id="ua" name="ua" placeholder="0" required value="<?php echo $row2['ua'];?>">
</div>
</div>
<?php
$query3="SELECT * FROM emp_allowed_leaves WHERE employee_id ='$empid'";
$result3 = mysqli_query($conn,$query3);
$row3 = $result3->fetch_array();
?>
<div class="col-lg-6 float-left">
<h5 class="mt-3 ml-3" style="color:#636c78;">Allowed Leaves Information</h5>
<div class="col-auto mt-3">
<label for="" class="mr-2">Annual Leaves: </label>
<input type="text" class=" form-control w-50 " id="aleaves" name="aleaves" placeholder="0" required value="<?php echo $row3['annual'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Casual Leaves: </label>
<input type="text" class=" form-control w-50 " id="cleaves" name="cleaves" placeholder="0" required value="<?php echo $row3['casual'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Sick Leaves: </label>
<input type="text" class=" form-control w-50 " id="sleaves" name="sleaves" placeholder="0" required value="<?php echo $row3['sick'];?>">
</div>
<div class="col-auto mt-1">
<label for="" class="mr-2">Maternity Leaves: </label>
<input type="text" class=" form-control w-50 " id="mleaves" name="mleaves" placeholder="0" required value="<?php echo $row3['maternity'];?>">
</div>
</div>
</div>
<div class="modal-footer mt-5">
<button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Next</button>
</div>
</div>
</div>
<!-- Incentives Information-->
<div class="tab-pane fade show" id="incentives">
<div class="well col-lg-12" id="displaydata1">
<!--CONTENT HERE-->
<?php
$query4="SELECT * FROM emp_benefits WHERE employee_id ='$empid'";
$result4 = mysqli_query($conn,$query4);
$row4 = $result4->fetch_array();
?>
<div class="col-lg-6 float-left check">
<h5 class="mt-3 ml-3" style="color:#636c78;">Company Allowed Benefits</h5>
<div class="col-auto mt-3 ml-4">
<input class="form-check-input" type="checkbox" name="gli" id="gli" onclick="return myfun()" value="gli" <?php if ($row4['gli'] == '1') echo "checked='checked'"; ?>>
<label class="form-check-inline" style="width: 150px;" style="text-align:left;">Group Life Insurance</label>
</div>
<div class="col-auto mt-1 ml-4">
<input class="form-check-input" type="checkbox" name="eobi" id="eobi" onclick="return myfun()" value="eobi" <?php if ($row4['eobi'] == '1') echo "checked='checked'"; ?>>
<label class="form-check-label" for="inlineRadio2" style="text-align:left;">EOBI </label>
</div>
<div class="col-auto mt-1 ml-4">
<input class="form-check-input" type="checkbox" name="pessi" id="pessi" onclick="return myfun()" value="pessi" <?php if ($row4['pessi'] == '1') echo "checked='checked'"; ?>>
<label class="form-check-label" for="inlineRadio2" style="text-align:left;">PESSI </label>
</div>
<div class="col-auto mt-1 mb-5 ml-4">
<input class="form-check-input" type="checkbox" name="overtime" id="overtime" onclick="return myfun()" value="overtime" <?php if ($row4['overtime'] == '1') echo "checked='checked'"; ?>>
<label class="form-check-label" for="inlineRadio2" style="text-align:left;">Overtime </label>
</div>
</div>
<div class="col-lg-6 float-left check">
<h5 class="mt-3 ml-3" style="color:#636c78;">Other Incentives</h5>
</div>
<div class="modal-footer mt-5">
<button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Close</button>
</div>
</div>
</div>
<!--Employee Panel Ends-->
</div>
<!-- SCRIPT -->
<script src="../scripts/app.js"></script>
<?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php'); ?>
<?php
// echo json_encode($data);
$conn->close();
?>
now I want to update the image in this opened modal on clicking button named persinfo, I want to assign all the values, in modal including newly selected image (using input named file, see code), to variables in AJAX and then call page update_employee.php page to execute the update query to change employee information and newly selected image in the opened modal. Code for update_employee.php for your reference
include '../../config/db_connect.php';
$id = $_POST['id'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$cnic = $_POST['cnic'];
$paddress = $_POST['paddress'];
$laddress = $_POST['laddress'];
$mobile = $_POST['mobile'];
$emergency = $_POST['emergency'];
$qualification = $_POST['qualification'];
$dob = $_POST['dob'];
$bloodgroup = $_POST['bloodgroup'];
$notes = $_POST['notes'];
$query_run= $conn->query("UPDATE employee SET first_name='$firstname', last_name='$lastname', cnic='$cnic', permanent_address='$paddress', local_address='$laddress',mobile='$mobile',emergency_contact='$emergency',dob='$dob', qualification='$qualification',blood_group='$bloodgroup',note='$notes' WHERE employee_id='$id'");
if ($query_run) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>
Can anybody help me with this? Regards
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|