Question

我有一个系统，可以上传不同用户的图片。然后，每个用户都可以访问一个选项卡，在该选项卡中，他可以查看自己上传的所有图片。用户还可以从该选项卡单击一个按钮，然后单独删除每个按钮。

我正在努力进行这项工作，因此希望有人可以帮助我。

这是我的数据库的样子：

表：图片，行：
- descPicture
- id
- imageFullNamePicture
- titlePicture
- 用户名
表：用户，行：
- user_email
- user_id
- 用户名
- user_password
- user_phone
- user_zip

这是我的代码：

DBH.INC.PHP

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chhoe17";


try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname",
    $username,
    $password,
    array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


}
catch(PDOException $e) {
    echo $e->getMessage();
}

UPLOAD.PHP

<?php
include_once 'header.php';
include_once "includes/dbh.inc.php";

?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <section class="main-container">
        <div class="main-wrapper">
            <h2>Manage your pictures</h2>

            <?php
            //display a message and images if logged in!
            if (isset($_SESSION['u_id'])) {
              echo "Upload your pictures";

              echo '<div class="picture-upload">
            <h2>Upload</h2>
            <br>
            <br>
            <br>
            <form action="upload.inc.php" id="upload" method="POST" enctype="multipart/form-data">
              <input type="text" name="filetitle" placeholder="Image title">
              <input type="text" name="filedesc" placeholder="Image description">
              <input type="file" id="file" name="file">
              <button type="submit" name="submit">Upload</button>
            </form>




          </div>';
            }

            if (isset($_SESSION['u_id'])) {
              echo ' <section class="picture-links">
          <div class="wrapper">
            <h2>Pictures</h2> ';

              ?>

            <div id="pictures">
                <?php



                $sql = "SELECT * FROM pictures WHERE userid = '{$_SESSION['u_id']}'";

                //$sql = "SELECT * FROM pictures ORDER BY userid DESC LIMIT 20;";
                $stmt = $conn->prepare($sql);
                $stmt->execute();
                $pictures = $stmt->fetchAll();

                // if ($pictures !== null) {
                foreach ($pictures as $pic) {
                  ?>
                <li>
                    <figure id="<?php echo $pic['id']; ?>">
                        <b>
                            <figcaption><?php echo $pic["titlePicture"] ?>
                                <img src=<?php echo $pic["imageFullNamePicture"]  ?>>
                                <?php echo $pic["descPicture"] ?> <br>
                    </figure>
                </li>


                <span><input type="submit" id="del_btn" value="Delete Image" /></span>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $("input#del_btn").click(function() {
                            $.ajax({
                                type: "POST",
                                url: "delete.php", // 
                                data: {
                                    id: <?php echo $delid; ?>
                                },
                                success: function(msg) {
                                    alert("Your picture has been deleted");
                                },
                                error: function() {
                                    alert("failure");
                                }
                            });
                        });
                    });
                </script>



                <?php

              }

            }
            ?>



            </div>



        </div>
    </section>

</body>

</html>

<?php
include_once 'footer.php';
?>

DELETE.PHP

<?php
include_once "includes/dbh.inc.php";

if (isset($_POST['id'])) {
    $picID = $_POST['id'];
    $sql = "DELETE FROM pictures WHERE id=?";
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($picID));
}

?>

目前，单击图片上的删除按钮没有任何反应，我也没有收到任何警报。有人可以提供帮助以完成这项工作，将不胜感激。

Answer 1

您正在重新使用id值，因此当jQuery选择器执行时应该找到哪个元素？另外，您要在循环中一遍又一遍地重复客户端点击处理程序。所有这些都可以简化。

使用class来标识您的“删除”按钮，并将相关的id放在数据属性中：

<button type="button" class="del_btn" data-id="<?php echo $delid; ?>">Delete Image</button>

然后，在循环外部，创建一个事件处理程序，该事件处理程序将侦听所有按钮，并使用按钮的data-id发出AJAX请求：

$('input.del_btn').on('click', function() {
    let id = $(this).data('id');
    $.post('delete.php', { id: id })
     .done(function () {
         alert('Your picture has been deleted');
     })
     .fail(function () {
         alert('failure');
     });
});

用Ajax和php删除图片

1 个答案: