如何在图像上创建删除按钮并添加其功能

时间:2018-01-09 10:33:52

标签: php mysql json

我的编码更新,所以我需要你的帮助。我希望你能帮助我。

我创建了一个数据库,并将数据库中的图像检索到PHP文件,并在我尝试添加删除按钮时收到错误,该按钮将从数据库中删除图像。下面是我的代码,请帮我添加删除按钮及其功能:

<section class="content">
     <div class="container-fluid">
       <div class="gallery">

          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <div class="card">
                <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('db_upload_dashboard.php');

            //get images from database
            $query = $db->query("SELECT * FROM upload_img 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"];
            ?>

//请帮我在这里添加删除按钮

<button id="delete"> Delete
                    <a href="<?php echo $imageURL; ?>"  data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
                        <img src="<?php echo $imageThumbURL; ?>" alt="" />
                    </a>
         </button>
                <?php }
                } ?>
                        </div>
                    </div>
                </div>
             </div>
         </div>
     </div>
 </div>
</section>

1 个答案:

答案 0 :(得分:2)

HTML禁止在按钮内嵌套链接。

首先编写有效的语义HTML,说出你的意思。

您想要发出更改数据库的HTTP请求。这意味着您需要一个POST请求。这意味着你需要一个表格。所以从那里开始吧。

<form method="POST" action="/delete-image.php">

</form>

您需要一个触发操作的按钮。

<form method="POST" action="/delete-image.php">
    <button>Delete</button> <!-- submit is the default type of button -->
</form>

您需要传递描述要删除的图像的数据:

<form method="POST" action="/delete-image.php">
    <button name="delete" value="<?php echo htmlspecialchars($row['id']); ?>">
        Delete
    </button>
</form>

您想要在按钮中显示图像

<form method="POST" action="/delete-image.php">
    <button name="delete" value="<?php echo htmlspecialchars($row['id']); ?>">
        <img src="<?php echo htmlspecialchars($imageThumbURL)" alt="">
    </button>
</form>

然后,您需要在提交表单时从数据库中删除它:

<?php
    if (!isset($_POST['delete'])) {
        show_an_error();
        exit();
    }
    $row_id_to_delete = $_POST['delete'];
    # Database query code left as an exercise to the reader