Multiple Images Uploaded Remove Selected Image on Multiple Images in PHP MySqli

Question

Hello Every One i have small problem i will upload multiple images single input file and database store with comma i will stored but i have problem is remove the uploaded images selected and remove the image when we click the image above delete icon that only image deleted

My Code for Retrieve the Multiple images

<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>

the above code Output look like this each image i will place delete button and hole gallery delete button

how to made to single image delete button and remove that image only remain will be as it is display

Answer 1

You can do it with small help of jquery, ajax and mysql.

On click delete icon you have to make one ajax request with image name and id parameters. Update image name in database using below query. On success ajax response you can remove that image block using jquery.

Html code for image. Just a sample line.

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

Jquery Code

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

I have write code is look like this :

 <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";>

each one of indexkey value can taken in 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>

remove.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

What if you do it in appearance. That is, you can define the array by indexes

<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>

I don't know English. This was done via google translate

remove.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);
        }
    }
}