javascript - 使用 php 和 sweet alert 2 删除文件

Question

我有这个脚本，可以在文件夹中显示所有图像，并且我在所有缩略图下都有一个删除按钮/链接。我单击此删除按钮/链接以显示 Sweet alert 2 确认框，如果单击 OK（Ja，Radera！），则会调用 unlink.php 文件并删除图像。但我的问题是，当我单击删除按钮/链接时，错误的图像被删除。任何人都可以看看有什么问题。谢谢你。

<div id="thumbs_gallery">
            //----------PART ONE START - SHOW ALL IMAGES IN FOLDER----------//
            <?php
                $directory = 'images/';
                $thumbsdir = 'images/thumbs';
                $allowed_types = array('jpg', 'JPG', 'JPEG', 'jpeg', 'gif', 'PNG', 'png');
                $fileNames = $files = $file_parts = array();
                $ext = '';
                $title = '$file';
                $i = 0;

                $toMatch = "{$directory}*.{".implode(',', $allowed_types).'}';
                $fileNames = glob($toMatch, GLOB_NOSORT | GLOB_BRACE);  

                    foreach($fileNames as $file) {
                        $f = explode('/', $file);
                        $fileName = end($f);
                        $files[$fileName] = filemtime($file);
                    }

                    arsort($files);

                    foreach(array_keys($files) as $file)
                    {
                        $file_parts = explode('.',$file);
                        $ext = strtolower(array_pop($file_parts));

                        $title = implode('.',$file_parts);
                        $title = htmlspecialchars($title);
                //----------PART ONE END----------//

                //----------PART TWO START - SHOW THUMBNAILS AND DELETE BUTTON/LINK----------//
                echo '
                <div class="thumbs_gallery_img" style="background:url('.$thumbsdir.'/'.$file.') no-repeat 50% 50%;"> //Show thumbnails
                <a href="'.$directory.''.$file.'" title="'.$title.'">'.$title.'</a> // Link to big image
                <div class="unlink"><i class="fas fa-trash-alt fa-2x"></i><a href="unlink.php?filename='.$file.'"></a></div> //Delete button/link
                </div>';
                //----------PART TWO END----------//

                //----------PART TRHEE START - PREVENT DEFAULT ON DELETE BUTTON/LINK AND RUN SWEET ALERT 2, AND THE UNLINK.PHP FILE.----------//
                echo '<script>
                $(".unlink a").on("click", function(e) {
                // Do not run the unlink.php file on link click.
                e.preventDefault();
                    // Run the Sweet Alert 2 code.
                    swal({
                    title: "Radera denna bild?",
                    text: "Klicka på Ja om du vill radera denna bild.",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Ja, Radera!",
                    cancelButtonText: "Nej, Avbryt!",
                    }).then((result) => {
                if (result.value) {
                // If confirm run the unlink.php file.
                    window.location.href ="unlink.php?filename='.$file.'";
                } else if (
                    result.dismiss === swal.DismissReason.cancel
                ) {
                // If cancel do nothing (stay on same page).
                }
                })
                })
                </script>';

                $i++;               
                }
            ?>
            //----------PART THREE END----------//
        </div>

       //THIS IS THE CODE IN THE unlink.php file:
   <?php
    $img_to_delete = $_GET['filename'];

    unlink('images/thumbs/'.$img_to_delete);
    unlink('images/'.$img_to_delete);
    header('location: dropzone.php');
    ?>

标签： javascriptphpfileunlinksweetalert2

Answer 1

问题

是你有许多重复的 js 函数<script>swal({})</script>绑定到一个选择器.unlink a。您正在为每个可以删除的文件添加重复的甜蜜警报功能，因为它们都绑定到同一个选择器，当您单击任何删除链接时会执行第一个选择器。该函数中引用的任何文件都会被删除。

解决方案

foreach而不是在您用来生成链接的循环中复制这个甜蜜的警报功能。您可以使用文件名向每个链接添加一个数据标签，然后让一个 js 函数负责处理删除。像这样的东西：

foreach (array_keys($files) as $file) {
   //add whatever filename modifications here
   echo '<a href="#" class="unlink" data-file="'.$file.'">Delete</a>';
}

<script>
  $("a.unlink").on("click", function(e) {
     // Run the Sweet Alert 2 code.
     swal({
       title: "Radera denna bild?",
       text: "Klicka på Ja om du vill radera denna bild.",
       type: "warning",
       showCancelButton: true,
       confirmButtonColor: "#d33",
       cancelButtonColor: "#3085d6",
       confirmButtonText: "Ja, Radera!",
       cancelButtonText: "Nej, Avbryt!",
     }).then((result) => {
        if (result.value) {
           // If confirm run the unlink.php file.
           window.location.href ="unlink.php?filename="+$(this).data('file');
        } else if (
           result.dismiss === swal.DismissReason.cancel
        ) {
            // If cancel do nothing (stay on same page).
        }
     })
 })</script>