Удаление картинки с помощью Ajax и php - PullRequest
0 голосов
/ 22 марта 2019

У меня есть система, где я могу загружать фотографии от разных пользователей.Затем каждый пользователь может получить доступ к вкладке, где он может видеть все фотографии, которые он загрузил самостоятельно.На этой вкладке пользователь также должен иметь возможность нажать на кнопку и удалить каждую из них по отдельности.

Я изо всех сил стараюсь сделать эту работу, поэтому я надеюсь, что кто-то может мне помочь.

ЭтоВот как выглядит моя база данных:

  • таблица: картинки, строки:
    • descPicture
    • id
    • imageFullNamePicture
    • titlePicture
    • ИД пользователя
  • Таблица: пользователи, строки:
    • user_email
    • user_id
    • user_name
    • 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));
}

?>

Как сейчас, ничего не происходит, когда я нажимаю кнопки удаления, прикрепленные кфотографии, и я тоже не получаю никаких предупреждений.Буду очень признателен за любую помощь, которую кто-то может оказать для этой работы.

1 Ответ

0 голосов
/ 22 марта 2019

Вы повторно используете значения 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');
     });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...