上传的多个图像在 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);
        }
    }
}