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 Call如下：

$(".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");
        }
    });
});

注意： 有关详细信息，请参阅this文档。在询问此类问题之前，您应该阅读this帖子。

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';
 ?>

添加删除按钮或符号以从数据库

3 个答案: