สอบถามการคลิกซูมขยายรูปภาพ

สืบเนื่องจากการที่หนูทำ drag and drop ค่ะ
อยากให้มันคลิกรูปที่อัพโหลดขึ้นไป เหมือนที่เราคลิกรูปภาพจากโพสต์บน facebook สามารถใช้ฟังก์ชันหรือ plugin ตัวไหนค่ะ ขอแนวทางในการศึกษาเพิ่มเติมค่ะ ขอบคุณล่วงหน้าค่ะ 

ปล.หนูขอแนบรูปภาพและโค้ดที่เขียนไปค่ะ




index.php 

 <div class="container mt-3">

        <h3>Drag and Drop Test</h3>

            <div id="drop_file_area">

                Drag and Drop Files Here or

                <a class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">

                  Select File(s)

                </a>

                <input type="file" id="selectfile"  hidden/>

                

            </div>

            <div id="uploaded_file"></div>

          

    </div>

ฟังก์ชัน javascript ที่ใช้

<script>

  $(document).ready(function () {

// เหตุการณ์ ระบุตำแหน่งที่สามารถลากข้อมูลที่ลากได้

    $("html").on("dragover", function (e) {

      e.preventDefault();

      e.stopPropagation();

    });

// เมื่อข้อมูลที่ลากมาถูกวางไว้ จะเกิดการดรอป

    $("html").on("drop", function (e) {

      e.preventDefault();

      e.stopPropagation();

    });

 

    $('#drop_file_area').on('dragover', function () {

      $(this).addClass('drag_over');

      return false;

    });

 

    $('#drop_file_area').on('dragleave', function () {

      $(this).removeClass('drag_over');

      return false;

    });

 

    $("#drop_file_area").on("click", function(e) {

          file_explorer();

        });

 

    $('#drop_file_area').on('drop', function (e) {

      e.preventDefault();

      $(this).removeClass('drag_over');

      var formData = new FormData();

      var files = e.originalEvent.dataTransfer.files;

      for (var i = 0; i < files.length; i++) {

        formData.append('file[]', files[i]);

      }

    //   console.log(formData);  

      uploadFormData(formData);

    

    });

 

    function file_explorer() {

          document.getElementById("selectfile").click();

          document.getElementById("selectfile").onchange = function() {

            files = document.getElementById("selectfile").files;

            var formData = new FormData();

 

            for (var i = 0; i < files.length; i++) {

              formData.append("file[]", files[i]);

            }

            uploadFormData(formData);

          };

        }

 

    function uploadFormData(form_data) {

      $.ajax({

        url: "file_upload.php",

        method: "POST",

        data: form_data,

        contentType: false,

        cache: false,

        processData: false,

        success: function (data) {

          $('#uploaded_file').append(data);

        }

      });

    }

  });

</script>

upload_file.php 

<?php

// Include the database connection file

include('db_config.php');

 

$fileData = '';

 

if(isset($_FILES['file']['name'][0]))

{

  foreach($_FILES['file']['name'] as $keys => $values)

  {

    $fileName = $_FILES['file']['name'][$keys];

 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $values))

    {

    //  เก็บลงโฟลเดอร์

      $fileData .= '<img src="uploads/'.$values.'" class="thumbnail" />';

    //  เก็บลงฐานข้อมูล

      $query = "INSERT INTO uploads (file_name)VALUES('".$fileName."')";

      mysqli_query($conn, $query);

    }

  }

}

echo $fileData;

?>

ลองดูประมาณตัวนี้ LIGHTBOX หรือค้นคำว่า Lightbox plugin