ok
Mini Shell
<?php
include "header.php";
$u_id=$_SESSION['user']['id'];
$query = "select * from tbl_alliances_register WHERE id = ". $u_id;
$prepared2 = $pdo->prepare($query);
$prepared2->execute();
$result = $prepared2->fetchAll(PDO::FETCH_ASSOC);
?>
<style>
header{
display: none;
}
.category-slider-container {
width: 100%; /* Set the desired width for your container */
overflow-x: scroll; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent items from wrapping to the next line */
}
.ui-sortable-placeholder {
border: 1px dashed black!important;
visibility: visible !important;
background: #eeeeee78 !important;
}
.ui-sortable-placeholder * { visibility: hidden; }
.RearangeBox.dragElemThumbnail{opacity:0.6;}
.RearangeBox {
width: 180px;
height: 225px;
padding: 10px 5px;
cursor: all-scroll;
float: left;
border: 1px solid #9E9E9E;
font-family: sans-serif;
display: inline-block;
margin: 5px!important;
text-align: center;
color: #9e9e9e;
background: #ff980000;
}
input[type="file"] {
display: none;
}
body{
font-family: sans-serif;
margin: 0px;
}
.IMGthumbnail{
max-width: 164px;
height: 179px;
margin: auto;
background-color: #ececec;
padding: 2px;
border: none;
}
.IMGthumbnail img{
max-width:100%;
max-height:100%;
}
.imgThumbContainer{
margin:4px;
border: solid;
display: inline-block;
justify-content: center;
position: relative;
border: 1px solid rgba(0,0,0,0.14);
-webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 4px 0 rgba(0,0,0,.2);
}
.imgThumbContainer > .imgName{
text-align:center;
padding: 2px 6px;
margin-top:4px;
font-size:13px;
height: 15px;
overflow: hidden;
}
.imgThumbContainer > .imgRemoveBtn{
position: absolute;
color: #e91e63ba;
right: 2px;
top: 2px;
cursor: pointer;
display: none;
}
.RearangeBox:hover > .imgRemoveBtn{
display: block;
}
.follower_row{
padding: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
.inner{
display: grid;
place-items: center;
height: 5vh;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
<!-- tab section start -->
<form id="photos_form" method="post" enctype="multipart/form-data" >
<div class="row" >
<div class="col-12 col-sm-12 " >
<div style='padding:14px'>
<label for="files" class="custom-file-upload">
<input id="files" name="files[]" type="file" multiple/>
<i class="fa fa-cloud-upload"></i> Choose Img</label><input class="custom-file-upload" type="submit" value="upload" />
</div>
<div style='padding:14px; margin:auto';>
<div id="sortableImgThumbnailPreview">
</div>
</div>
</div>
</div>
</form>
<!--tab end-->
<!-- panel space start -->
<section class="panel-space"></section>
<!-- panel space end -->
<!-- bottom panel start -->
<div class="cart-bottom row m-0">
<div>
<div class="left-content col-5">
<a href="#" class="title-color">CANCEL </a>
</div>
<a href="delivery.html" class="btn btn-solid col-7 text-uppercase">Save Details </a>
</div>
</div>
<!-- bottom panel end -->
<?php include "footer2.php" ?>
<script>
// $(function () {
// $("#sortableImgThumbnailPreview").sortable({
// connectWith: ".RearangeBox",
// start: function (event, ui) {
// $(ui.item).addClass("dragElemThumbnail");
// ui.placeholder.height(ui.item.height());
// },
// stop: function (event, ui) {
// $(ui.item).removeClass("dragElemThumbnail");
// }
// });
// $("#sortableImgThumbnailPreview").disableSelection();
// });
document
.getElementById("files")
.addEventListener("change", handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files;
var output = document.getElementById("sortableImgThumbnailPreview");
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; (f = files[i]); i++) {
// Only process image files.
if (!f.type.match("image.*")) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var imgThumbnailElem =
"<div class='RearangeBox imgThumbContainer'><i class='material-icons imgRemoveBtn' onclick='removeThumbnailIMG(this)'>cancel</i><div class='IMGthumbnail' ><img src='" +
e.target.result +
"'" +
"title='" +
theFile.name +
"'/></div><div class='imgName'>" +
theFile.name +
"</div></div>";
output.innerHTML = output.innerHTML + imgThumbnailElem;
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
function removeThumbnailIMG(elm) {
elm.parentNode.outerHTML = "";
}
</script>
<script>
$('#photos_form').on('submit',function(e){
e.preventDefault();
var fileCount = $('#files')[0].files.length;
alert(fileCount);
var formData = new FormData(this);
formData.append('type', 'photos_form');
formData.append('count', fileCount);
console.log(formData);
$.ajax({
url: 'api/profile_add.php',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
if (response['status'] == 200) {
alert(response['message']);
$(this).trigger("reset");
window.location.href = 'index.php';
} else {
alert(response['message']);
}
}
});
})
</script>
Zerion Mini Shell 1.0