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

【问题标题】：Need to add delete button or symbol to delete the retrieved images from database需要添加删除按钮或符号以从数据库中删除检索到的图像
【发布时间】：2017-12-23 08:56:43
【问题描述】：

我使用下面的 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>

【问题讨论】：

你读过这个吗？ stackoverflow.com/questions/9436534/…
我没有从中得到，
你不能从中得到。上面的评论提到你必须为此使用ajax
@TarangP，你给我提供了任何源代码，我对这个 Ajax 函数没有很好的了解。谢谢
我觉得this可以帮到你。

标签： javascript php jquery html css

【解决方案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>

【讨论】：