php - Delete image on click using JavaScript - Stack Overflow

admin管理员组

文章数量:1410712

<?php     
 $imgcheck=mysql_query("

  SELECT *
FROM `images`
 WHERE `deal_id` =$_SESSION[eid]
LIMIT 0 , 30

 ");
 $numimgcheck=mysql_num_rows($imgcheck);
  if($numimgcheck==0){echo '<span style=color:#ff0000; >No pictures uploaded</span>';}
    while ($rowimg2= mysql_fetch_array($imgcheck)){ 


     $imgname=$rowimg2['name'];

     {
    //   $rowimg2 = mysql_fetch_array($imgcheck) or die(mysql_error());

     //echo $imgname;
     echo '    <a href="users/'.$_SESSION['userid'].'/images/'.$imgname.'"   rel="lightbox[slide]" caption=".">';
       }


       { echo '<img src="users/'.$_SESSION['userid'].'/images/thumbs/'.$imgname.'"   border="0" />';}
     { echo '</a><a href="delimg.php?id='.$imgname.'"><img src="images/del.jpg" width="22" height="22" onclick="deleteImg(this);" />   </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     ';

    }

  //<input type="checkbox" name="'.$imgname.'" id="'.$imgname.'" > if($numimgcheck==0){      $havepic=' <td width="50px" align="center"><div class="iddivimg"> <img src="users/default/nopic_small.jpg"  />

// ';}

    }
    ?>

There is a page in my website where users can edit and delete images. In this page, there is a delete button (itself a 20x20 image) near every image. When the user clicks on that button, its corresponding image will be deleted. I want it to be in such a way that when I click the delete image a confirm box should appear, asking "Are you sure you want to delete this image?" If I click yes, I want to delete the MySQL table's data and image. If I click no, nothing should happen. How can I do this?

<?php     
 $imgcheck=mysql_query("

  SELECT *
FROM `images`
 WHERE `deal_id` =$_SESSION[eid]
LIMIT 0 , 30

 ");
 $numimgcheck=mysql_num_rows($imgcheck);
  if($numimgcheck==0){echo '<span style=color:#ff0000; >No pictures uploaded</span>';}
    while ($rowimg2= mysql_fetch_array($imgcheck)){ 


     $imgname=$rowimg2['name'];

     {
    //   $rowimg2 = mysql_fetch_array($imgcheck) or die(mysql_error());

     //echo $imgname;
     echo '    <a href="users/'.$_SESSION['userid'].'/images/'.$imgname.'"   rel="lightbox[slide]" caption=".">';
       }


       { echo '<img src="users/'.$_SESSION['userid'].'/images/thumbs/'.$imgname.'"   border="0" />';}
     { echo '</a><a href="delimg.php?id='.$imgname.'"><img src="images/del.jpg" width="22" height="22" onclick="deleteImg(this);" />   </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     ';

    }

  //<input type="checkbox" name="'.$imgname.'" id="'.$imgname.'" > if($numimgcheck==0){      $havepic=' <td width="50px" align="center"><div class="iddivimg"> <img src="users/default/nopic_small.jpg"  />

// ';}

    }
    ?>

There is a page in my website where users can edit and delete images. In this page, there is a delete button (itself a 20x20 image) near every image. When the user clicks on that button, its corresponding image will be deleted. I want it to be in such a way that when I click the delete image a confirm box should appear, asking "Are you sure you want to delete this image?" If I click yes, I want to delete the MySQL table's data and image. If I click no, nothing should happen. How can I do this?

• php
• javascript
• mysql

Share Improve this question Follow edited Jun 16, 2011 at 3:40 Chamara Denipitiya asked Jun 16, 2011 at 3:08 Chamara DenipitiyaChamara Denipitiya 9333 silver badges1212 bronze badges 15

• Please tag with server-side language (assuming PHP?) – mellamokb Commented Jun 16, 2011 at 3:16
• @mellamokb previously it was tagged as Java ... so I assumed .. – mihsathe Commented Jun 16, 2011 at 3:20
• This is more of a Javascript question and not a MySQL, so I think you should remove the "mysql" tag – Abhay Commented Jun 16, 2011 at 3:20
• @Abhay Gupta: This is very much a MySQL question, and some server-side language must be involved (i.e., php). How else are you going to "delete the MySQL table's data and image" (straight from OP)? – mellamokb Commented Jun 16, 2011 at 3:22
• 1 @Chamara Denipitiya: Please ment on the appropriate answer that you tried with what happened, and what you expected to happen. Can you edit and add a sample of the code you are trying to your question? – mellamokb Commented Jun 16, 2011 at 3:33

 |  Show 10 more ments

6 Answers 6

Sorted by: Reset to default 2

Put each image in its own form with the image identifier as hidden value and use the delete image as CSS background image of the submit button. Finally use JS confirm() function for the confirmation.

<form action="delete.php" method="post">
    <img src="image1.png" />
    <input type="hidden" name="id" value="1" />
    <input type="submit" class="delete" value="" onclick="return confirm('Sure?')" />
</form>
<form action="delete.php" method="post">
    <img src="image2.png" />
    <input type="hidden" name="id" value="2" />
    <input type="submit" class="delete" value="" onclick="return confirm('Sure?')" />
</form>
...

with CSS

.delete {
    background-image: url('delete.png');
    width: 20px;
    height: 20px;
    border: 0;
    cursor: pointer;
}

This is easily done in a loop. You could use jQuery to unobtrusively introduce ajaxical powers, whenever necessary.

Its hard to help without some sample code. assuming you have a function deleteImg() and an image <img src="delete.jpg" onclick="deleteImg(this);" />

then you do:

function deleteImg(image)
{
  if(confirm("are you sure you want to delete this image"))
  {
      ... // delete image logic.
  }
}

http://www.javascripter/faq/confirm.htm

What server-side language is being used? Assuming PHP for the purposes of this explanation.

Rough sketch (AJAX method):

1. Create a server-side page that can be called to delete an image (say, delete_image.php?image_id={id})
2. Onclick on the image, use confirm to validate user wants to continue.
3. If confirm was true, create an AJAX post to the delete_image call (see jQuery library for easy method to do this).
4. Remove image from the page (or refresh).

Form POST method:

1. Wrap every delete image button in a form, which posts to delete_image.php, with a hidden input variable containing the image id.
2. Onclick (or onsubmit) use javascript confirm, and only continue on true result.
3. In delete_image.php, retrieve image_id from post form
4. Delete corresponding image from MySQL database with a DELETE query.
5. Redirect back to image display page to refresh with image removed.

It seems you haven't tried searching the net for solution because I'm sure you will find some if not many. When clicked on the image, call a javascript function that prompts the user with a question, using the JS confirm() function, like

if (confirm("Do you want to delete the image?")) {
    // call your PHP script that will then delete the image
}

In the code that you had recently added to your question, I think the issue is that the <a href> is always executed because it runs independent of your call to the function deleteImg().

<a href="delimg.php?id='.$imgname.'">
    <img src="images/del.jpg" width="22" height="22" onclick="deleteImg(this);" />
</a>

I think if you change your code to this, it should work:

<a href="delimg.php?id='.$imgname.'" onclick="deleteImg(this);">
    <img src="images/del.jpg" width="22" height="22"  />
</a>

And in your deleteImg() function, add return TRUE; in the IF part of your confirm() and add return FALSE in the ELSE part. Something like this:

if (confirm("Do you want to delete the image?")) {
    // call your PHP script that will then delete the image
    return TRUE;
} else {
    return FALSE;
}

Well there is no single solution to this so I'll provide some technologies that will be useful for you (I assume from the tag that you are using Java environment on server).

As for the confirm box, In case you mean something like DHTML confirm boxes that are monly seen on Facebook, you might want to use jQuery UI ponent. Have a look at this : http://jqueryui./demos/dialog/#modal-confirmation

You can also use javascript confirm function, but these boxes are currently in vogue.

As far as updating the database is considered, of course that has to be done from server side. You can set a Servlet to do the deletion or a web service for the same. It just is a matter of passing right parameters.

本文标签： phpDelete image on click using JavaScriptStack Overflow