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

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调用成功后隐藏图像。

Answer 2

      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>
      <!-- HERE YOU CREATE SPAN AND GIVE IMAGE ID AS DATA ID
      <span class="deleteImage" data-id="<?=$row[0]?>">Delete Image</span>
      <?php }

和ajax调用如下

$(".deleteImage").click(function(){
    $.ajax({
        //PAGE THAT DELETE IMAGE
        url: "delete_image_page.php",
        context: document.body,
        data: {data:data}
        success: function(){
          //ON SUCCESS WHAT YOU WANT TO DO
          $(this).addClass("done");
        }
    });
});

注意：有关更多信息，请阅读此文档。而且，您应该在提出此类问题之前先阅读这篇文章。

Answer 3

这是一个小例子。基本上，在单击按钮时，您要调用AJAX方法以发送要删除的图像名称。需要将请求发送到另一个PHP文件，该文件将接收请求，对其进行处理并返回响应。根据响应，我们会知道该方法是否成功。

您需要一个额外的Javascript文件来保存AJAX功能，以及一个其他PHP文件来处理请求并返回响应。

您的php文件：

<div class="header">
<h2>GALLERY</h2>
<!--<small>All pictures taken from <a href="https://unsplash.com/" target="_blank">unsplash.com</a></small>-->
<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"];
      echo '<div class="imageContainer">
                <a href="'.$imageURL.'"  data-fancybox="group" data-caption="'.$row['title'].'" >
                    <img src="'.$imageThumbURL.'" alt="" />
                </a>
                <input type="button" onclick="deleteImage(''.$row["file_name"].'')" value="Delete" />
            </div>';
    }
  }   
?>
            </div>
        </div>
    </div>

JavaScript文件：

// Send the `fileName` of the image
function deleteImage(fileName)
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function()
  {
    // This `if` underneath is success. It means we got a response back
    if (this.readyState == 4 && this.status == 200)
    {
      if(this.responseText == "OK")  
      {
          alert('Success, deleted: ' + fileName + ' Response: ' + this.responseText);
      }
      else if(this.responseText == "Not OK") 
      {
          alert('Picture: ' + fileName + ' was  not deleted.');
      }
  }
};
// For example you send a request to deleteImage.php sending `fileName` info
// - deleteImage.php just needs to echo the response to answer back
xhttp.open("GET", "deleteImage.php?fileName=" + fileName, true);
xhttp.send();

}

其他php文件，deleteimage.php（ajax请求接收者）：

 <?php
     $con = ... // Here goes DB connection data
     if(isset($_GET['fileName']) && $_GET['fileName'] != '')
     {
          // Clean the input
          $clean['fileName'] = mysqli_real_escape_string($con, $_GET['fileName']);
          // Do something
     }
     // if successful echo 'OK';
     // if not successful echo 'Not OK';
 ?>