上傳的多個圖像在 PHP MySqli 中刪除多個圖像上的選定圖像

Question

大家好，我有一個小問題，我將上傳多個圖像，單個輸入文件和數據庫存儲，我將存儲，但我有問題是刪除已選擇的上傳圖像，並在我們單擊上面的圖像時刪除圖像刪除圖標，僅刪除了圖像

我的檢索多個圖像的代碼

<div class="panel-body">
                <div class="table-responsive">
                  <table id="dataTableExample1" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                          <th>S.No</th>
                          <th>Gallery Images</th>
                          <th>Gallery Name</th>
                          <th>Operation</th>
                        </tr>
                    </thead>
                    <tbody>
                          <?php
                          extract($_REQUEST);
                          $sql="SELECT * FROM `smw_gallery`";
                          $result = $conn->query($sql);
                          $count=$result->num_rows;
                          if ($count > 0) {
                          $i=1;
                          while ($row = $result->fetch_object()) {

                              $primages = $row->smw_gallery_images;

                              $imgp = explode(",", $primages);

                              $realPath = '../assets/images/gallery/';
                          
                          ?>
                          <tr>
                            <td style="width:10%"><?=$i;?></td>
                            <td style="width:50%">
                              <?php foreach($imgp as $img)
                                  {

                                    echo '<a class="example-image-link" href="#" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="'.$realPath.'/'.$img.'" alt="" height="80" width="80" style="margin: 10px;"/></a>';

                                  }  ?>
                            </td>
                            <td style="width:10%">
                              <?php
                              $limit = 30;
                              $td_title1 = $row->smw_gallery_name;
                              if (strlen($td_title1) > $limit)
                              $td_title1 = substr($td_title1, 0, strrpos(substr($td_title1, 0, $limit), ' '))."...";
                              echo $td_title1;
                            ?></td>
                            <td style="width:20%">
                              <center>
                              <a  href="gallery-edit.php?edit=<?=$row->smw_gallery_id;?>" title="Edit"><i class="fa fa-pencil-square-o btn btn-warning" aria-hidden="true"></i></a>&nbsp;
                              </center>
                            </td>
                          </tr>
                          <?php $i++;  }  }   ?>
                    </tbody>
                  </table>
                </div>
              </div>

上面的代碼輸出看起來像這樣每個圖像我將放置刪除按鈕和孔庫刪除按鈕

如何制作單個圖像刪除按鈕並刪除該圖像，只保留原樣顯示

Answer 1

您可以借助 jquery、ajax 和 mysql 的小幫助來完成。

單擊刪除圖標時，您必須使用圖像名稱和 id 參數發出一個 ajax 請求。 使用以下查詢更新數據庫中的圖像名稱。 在成功的 ajax 響應中，您可以使用 jquery 刪除該圖像塊。

圖像的 HTML 代碼。 只是一個樣品線。

<a href="#" data-name="image-name1" class="delete-image">DeleteIcon</a>

查詢代碼

$(document).on('click', '.delete-image', function(){
    var $this = $(this);
    var imagname = $(this).data('name');
    $.post("delete_image.php",
    
        name: imagname,
        id: 1
    },
    function(data, status){
        $this.closest(tr).remove(); //Write your remove code for single image
    });
})

我寫的代碼是這樣的：

 <img class="btn-delete" id="photo-<?=$photo_index_key;?>" data-id="<?=$photo_index_key;?>" data-name="<?=$photo_name;?>" style="margin: 3px 1px 74px -17px; cursor: pointer;" src="../assets/images/closes.png";>

每個 indexkey 值都可以在 jquery var $imageId = $(this).attr('id');

<script>
    $(document).on('click', '.btn-delete', function(){
    var imageId = $(this).attr('data-id');
    var imageName = $(this).attr('data-name');
    var dataString = {id:imageId, name: imageName}
    $.ajax({
                type: "POST",
                url: "remove.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $('#photo'+imageId).remove(); // you can write your logic
                } 
            });
});
</script>

刪除.php

//get ajax data:

$id = $POST['id'];
$name = $POST['name'];

UPDATE smw_gallery
SET `smw_gallery_images` = REPLACE(`smw_gallery_images`, $name,'') 
WHERE `id` = $id;

Answer 2

如果你在外觀上做到這一點。 也就是說，您可以通過索引定義數組

<div class="panel-body">
<div class="table-responsive">
    <table id="dataTableExample1" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>S.No</th>
            <th>Gallery Images</th>
            <th>Gallery Name</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <?php
        extract($_REQUEST);
        $sql = "SELECT * FROM `smw_gallery`";
        $result = $conn->query($sql);
        $count = $result->num_rows;
        if ($count > 0) {
            $i = 1;
            while ($row = $result->fetch_object()) {

                $primages = $row->smw_gallery_images;

                $imgp = explode(",", $primages);

                $realPath = '../assets/images/gallery/';

                ?>
                <tr>
                    <td style="width:10%"><?= $i; ?></td>
                    <td style="width:50%">
                        <?php foreach ($imgp as $photo_index_key => $img) {

                            echo '<a class="example-image-link" href="#" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
                                    <img class="example-image" src="' . $realPath . '/' . $img . '" alt="" height="80" width="80" style="margin: 10px;"/>
                                  </a>';
                            echo "<a href='".$realPath . "/remove.php?smw_gallery_id=" . $row->id . "&photo_index_key=" . $photo_index_key . "'></a>";

                        } ?>
                    </td>
                    <td style="width:10%">
                        <?php
                        $limit = 30;
                        $td_title1 = $row->smw_gallery_name;
                        if (strlen($td_title1) > $limit)
                            $td_title1 = substr($td_title1, 0, strrpos(substr($td_title1, 0, $limit), ' ')) . "...";
                        echo $td_title1;
                        ?></td>
                    <td style="width:20%">
                        <div style="text-align: center;">
                            <a href="gallery-edit.php?edit=<?= $row->smw_gallery_id; ?>" title="Edit"><i
                                        class="fa fa-pencil-square-o btn btn-warning" aria-hidden="true"></i></a>&nbsp;
                        </div>
                    </td>
                </tr>
                <?php $i++;
            }
        } ?>
        </tbody>
    </table>
</div>

我不懂英語。 這是通過谷歌翻譯完成的

刪除.php

<?php
if (!empty($_GET['smw_gallery_id'] && !empty($_GET['photo_index_key']))) {
    $sql = sprintf("SELECT `smw_gallery_images` FROM `smw_gallery` WHERE `id` = %d", $_GET['smw_gallery_id']);
    $result = $conn->query($sql);
    $result->fetch_assoc();
    if (!is_null($result) && is_array($result)) {
        while ($row = $result->fetch_assoc()) {
            $smw_gallery_images = explode(",", $row['smw_gallery_images']);
            $new_smw_gallery_images = array_splice($smw_gallery_images, $_GET['photo_index_key'], 1);
            $new_smw_gallery_images = implode(',', $new_smw_gallery_images);

            $updateSql = sprintf("UPDATE smw_gallery SET `smw_gallery_images` = %s WHERE `id` = %d", $new_smw_gallery_images, $_GET['smw_gallery_id']);
            $conn->query($updateSql);
        }
    }
}