ok
Mini Shell
<?php include('header.php');
$ids = $_GET['ids'];
?>
<div class="page-wrapper">
<div class="page-content">
<div class=" card card-body">
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
<div class="breadcrumb-title">Zodiac Create Details </div>
<div class="ms-auto">
<div class="btn-group">
<a href="raasi.php" class="btn btn-sm btn-warning"><i class="lni lni-arrow-left"></i> Back To Zodiac List</a>
</div>
</div>
</div>
<form id="cat_add_form" method="post" enctype="multipart/form-data" >
<div class="row g-3">
<div class="col-12 col-lg-4">
<div class="image_area" onclick="browse_image()" style="text-align: center;">
<label for="upload_image">
<center>
<img style="min-width: 200px;min-height: 200px;" src="https://demo.webslesson.info/demo-crop-image-before-upload-using-cropperjs-with-php/user.png" id="uploaded_image" class="img-responsive img-circle" />
</center>
<div class="overlay">
<div class="text">Click to Change Image <?=$ids?></div>
</div>
</label>
</div>
<div class="col-md-12 progress" id="progress" style="display:none;">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row g-3">
<div class="col-12 col-lg-6">
<label for="FisrtName" class="form-label required">Zodiac Name</label>
<input type="text" class="form-control" style="text-transform:uppercase" name="cat_name" placeholder="Enter a Zodiac ">
</div>
<div class="col-12 col-lg-6">
<label for="FisrtName" class="form-label required">Display Order</label>
<input type="text" class="form-control" oninput="this.value=this.value.replace(/[^0-9]/g,'')" name="d_order" placeholder="Enter display order">
</div>
<div hidden class="col-12 col-lg-4">
<label for="FisrtName" class="form-label required">Is Sub-Category Available</label>
<select name="sub_cat_avl" id="client_id" class="form-select valid font-size12" aria-invalid="false" required="">
<option selected value="YES">YES</option>
<option value="NO">NO</option>
</select>
</div>
<div class="col-12 col-lg-4">
<label for="FisrtName" class="form-label required">Status</label>
<select name="status" id="status" class="form-select valid font-size12" aria-invalid="false" required="">
<option value="ACTIVE">ACTIVE</option>
<option value="IN-ACTIVE">IN-ACTIVE</option>
</select>
</div>
<div hidden class="col-12 col-lg-4">
<label hidden for="FisrtName" class="form-label required">Zodiac Signs Categories Status</label>
<select name="zodiac" id="zodiac" class="form-select valid font-size12" aria-invalid="false" required="">
<option selected value="ACTIVE">ACTIVE</option>
<option value="IN-ACTIVE">IN-ACTIVE</option>
</select>
</div>
<div hidden class="col-12 col-lg-6">
<label for="FisrtName" class="form-label">Old Image Name</label>
<input type="text" id="old_image" class="form-control" name="old_img_name" placeholder="Old Image Name">
</div>
<div hidden class="col-12 col-lg-6">
<label for="FisrtName" class="form-label">New Image Name</label>
<input readonly type="text" id="image" class="form-control" name="new_img_name" placeholder="New Image Name">
<input type="hidden" id="ids" class="form-control" value=" <?=($ids==''?0:$ids)?>" name="ids">
</div>
</div>
<div class="row g-3" style="padding:20px 10px;">
<div class="col-6 col-lg-12">
<button type="submit" class="btn btn-success" style="padding: 2px 20px;" name="pickup_address_select"><i class="bx bx-save ms-2"></i> Save Zodiac</button>
<a class="btn btn-danger" style="padding: 2px 20px;" name="pickup_address_select"><i class="bx bx-reset ms-2"></i> Reset All Data</a>
</div>
</div>
</div>
</div>
</form>
<form action="upload/upload.php" id="photoUpload" method="post" enctype="multipart/form-data" style="display:none;">
<input type="file" name="image" class="image" id="browse" style="display:none;" />
</form>
</div>
</div>
</div>
<style>
.bar {
height: 15px;
background-color: #4CAF50;
font-size: 15px;
border-radius: 5px;
}
.percent{
position: absolute;
margin-top: -16px;
padding-left: 7px;
color: white;
}
.image_area {
position: relative;
}
img {
display: block;
max-width: 50%;
text-align:center;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
transition: .5s ease;
width: 100%;
}
.image_area:hover .overlay {
height: 50%;
cursor: pointer;
}
.text {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
<script>
function browse_image(){
document.getElementById('browse').click();
}
$(document).ready(function() {
var percent = $('.percent');
var bar = $('.bar');
$("#browse").on("change", function() {
var fsize = $('#browse')[0].files[0].size;
var ext = $('#browse').val().split('.').pop().toLowerCase();
/*if($.inArray(ext, ['jpg','jpeg']) == -1)
{
alert('Photo Should be .jpg,.jpeg Format');
}
else if(fsize>1048576)
{
alert("Maximum Size 1MB");
}
else {*/
document.getElementById("progress").style.display = "block";
$('#photoUpload').ajaxForm({
beforeSend: function() {
bar.width('0%');
percent.html('0%');
},
uploadProgress: function(event, position, total, percentComplete) {
var pVel = percentComplete + '%';
bar.width(pVel);
percent.html(pVel);
},
complete: function(data) {
console.log('Success...');
console.log(data);
console.log(data['responseText']);
$('#image').val(data['responseText']);
$('#uploaded_image').attr('src', data['responseText']);
success('Image Successfully Uploaded');
},
error: function(data){
console.log('Failed...');
console.log(data);
}
}).submit();
/* }*/
});
});
</script>
<script>
$(document).ready(function() {
$('#cat_add_form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('type', 'upload');
console.log(formData);
$.ajax({
url: 'api/raasi_add.php',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
if (response['status'] == 200) {
success(response['message']);
// window.location.reload();
} else {
warning(response['message']);
}
}
});
});
});
</script>
<?php include('footer.php'); ?>
Zerion Mini Shell 1.0