需要添加删除按钮或符号以从数据库中删除检索到的图像

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