Need to add delete button or symbol to delete the retrieved images from database

Question

I have created an image gallery using the PHP code below, which will retrieve the images from a database.

How can I add a delete symbol to the images so that I can delete it after getting retrieved from the database?

<div class="container">
<h1>Dynamic Image Gallery </h1>
<div class="gallery">
    <div class="card">
    <?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>

do you ever read this. https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get — TarangP, Dec 23 '17 at 09:00
You can't get from that. above comment mention that you have to use ajax for this — TarangP, Dec 23 '17 at 09:20
@ TarangP, i you provide me any source code, i dont have good knowledge on this Ajax functions. Thank you — Shaik, Dec 23 '17 at 10:03
I think [this](http://www.webslesson.info/2017/06/ajax-image-add-edit-remove-from-mysql-database-using-php.html) can help you. — Ali Soltani, Dec 23 '17 at 10:53

score 0 · Answer 1 · edited Dec 23 '17 at 15:20

Try like below,after use any of the ajax method for inner form submits.

        <div class="img_wrapper" >
         <form action="action to delete" method="POST" class="de_img">
               <input type="submit" value="X" class="img_close">
               <input type="hidden" NAME="deleteable_id" VALUE="">
            </form>
            <img src="<?php echo $imageThumbURL; ?>" alt="" />
        </div>


        <style>
        .img_close {
            position: absolute;
            top: -9px;
            right: -9px;
            border-radius:50%;
            background-color:pink; 
            cursor: pointer;
        }
        .img_wrapper img{
        width:100%;
        }
        .img_wrapper{
        position:relative;
        width:100px;
        height:100px;
        background-color:#ccc;
        margin:2px;
        }
        </style>
        if you use jquery
        <script>
         $('.de_img').submit(function(event){
                event.preventDefault();
                $.ajax({
                    type        : 'POST',
                    url         : "<?php echo URL Here ?>", 
                    data        : new FormData(this),
                    contentType:false,
                    processData:false,
                })
               .done(function(data,status){
                    //echo Success or fail from submit url
                    if(status=='success'){
                    }else{
                    }
                });
            });
        </script>

Need to add delete button or symbol to delete the retrieved images from database

1 Answers1