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

Question

我使用下面的 PHP 代码创建了一个图片库，它将从数据库中检索图像。现在我想给图像添加一个删除符号，这样我就可以在从数据库中检索到图像后将其删除。请帮帮我。我该怎么做？

<div class="header">
    <h2>
        GALLERY
        <!--<small>All pictures taken from <a href="https://unsplash.com/" target="_blank">unsplash.com</a></small>-->
    </h2>
    <hr/>
    <div class="body">
        <div id="aniimated-thumbnials" class="list-unstyled row clearfix">
            <?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>
</div>

Answer 1

你可以简单的添加一个删除按钮

<?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 id="imageid-<?=$row[0]?>" href="<?php echo $imageURL; ?>"  data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
               <img src="<?php echo $imageThumbURL; ?>" alt="" />
               <div class="delete" data-imgId="<?=$row[0]?>">Delete</div>
            </a>
<?php 
        }
    } 
?>

然后处理那个按钮的点击和像这样的 ajax 调用

$(".delete").click(function(e){
    var rowId = e.target.dataset.imgId;
    $.ajax({
        method: 'DELETE',
        url: "", // url to delete
        data: {image_id: rowId}
        success: function(){
          $('imageid-'+rowId).hide();
        }
    });
});

这里它会将图片id作为参数传递给api调用，并在api调用成功后隐藏图片。