ok

Mini Shell

Direktori : /home2/selectio/www/wedding-info-new/
Upload File :
Current File : /home2/selectio/www/wedding-info-new/upload_images.php


<?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