データベースから取得した画像を削除するための削除ボタンまたはシンボルを追加する必要があります

Question

以下のPHPコードを使用して画像ギャラリーを作成しました。

削除シンボルをイメージに追加してデータベースから取得した後で削除するにはどうすればよいですか？

<div class="container"> 
<h1>Dynamic Image Gallery </h1> 
<div class="gallery"> 
    <div class="card"> 
    <?php 
    //Include database configuration file 
    include('dbConfig.php'); 

    //get images from database 
    $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC"); 

    if($query->num_rows > 0){ 
     while($row = $query->fetch_assoc()){ 
      $imageThumbURL = ' images/thumb/'.$row["file_name"]; 
      $imageURL = 'images/'.$row["file_name"]; 
    ?> 
     <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" > 
      <img src="<?php echo $imageThumbURL; ?>" alt="" /> 
     </a> 
    <?php } 
    } ?> 
    </div> 
</div> 

Answer 1

利用インナーフォームの提出のためのAjaxの方法のいずれかの後、以下のように試してみてください。

 <div class="img_wrapper" > 
 
     \t <form action="action to delete" method="POST" class="de_img"> 
 
       <input type="submit" value="X" class="img_close"> 
 
       <input type="hidden" NAME="deleteable_id" VALUE=""> 
 
      </form> 
 
      <img src="<?php echo $imageThumbURL; ?>" alt="" /> 
 
     </div> 
 

 

 
     <style> 
 
     .img_close { 
 
      position: absolute; 
 
      top: -9px; 
 
      right: -9px; 
 
      border-radius:50%; 
 
      background-color:pink; 
 
      cursor: pointer; 
 
     } 
 
     .img_wrapper img{ 
 
     width:100%; 
 
     } 
 
     .img_wrapper{ 
 
     position:relative; 
 
     width:100px; 
 
     height:100px; 
 
     background-color:#ccc; 
 
     margin:2px; 
 
     } 
 
     </style> 
 
     if you use jquery 
 
     <script> 
 
     $('.de_img').submit(function(event){ 
 
       event.preventDefault(); 
 
       $.ajax({ 
 
        type  : 'POST', 
 
        url   : "<?php echo URL Here ?>", 
 
        data  : new FormData(this), 
 
        contentType:false, 
 
        processData:false, 
 
       }) 
 
       .done(function(data,status){ 
 
        //echo Success or fail from submit url 
 
        if(status=='success'){ 
 
        }else{ 
 
        } 
 
       }); 
 
      }); 
 
     </script>