时间戳

首页 > 解决方案 > 创建 N 个单独的删除表单

javascript - 创建 N 个单独的删除表单

问题描述

我正在尝试编写一个类似论坛的应用程序，用户可以在其中添加评论（保存在数据库中）并将最多 3 个文件附加到每个评论。

    // SQL query to SELECT comments from database
   
    // Echo out all comments
    foreach ($resultCom as $row) {
        echo $commentContent;

    // Echo out up to 3 files for each comment
                    if (isset($commentFile1) {
                        echo "<a class='file-download' href='upload/$commentFile1'>$commentFileName1</a>";
                        }
                        if (isset($commentFile2) {
                        echo "<a class='file-download' href='upload/$commentFile2'>$commentFileName2</a>";
                        }
                        if (isset($commentFile3) {
                        echo "<a class='file-download' href='upload/$commentFile3'> $commentFileName3</a>";
                        }
}

现在我想让用户可以删除他们评论中的每个文件，这意味着我需要为每个评论中的每个文件编写一个删除表单：

<form action="delete_file.php" method="post">
  <input name="id">
  <input name="filename">
...
<button type="submit" name="delete-submit">Delete</button>
</form>

这同样<form>会存在很多次，name对输入/提交按钮使用相同的属性。如果我使用 JavaScript 遍历每个文件并给每个输入字段一个唯一的名称，我最终仍然会有一个按钮将信息提交给我action="delete_file.php"，然后在 delete_file.php 中捕获和处理，如下所示：

if(isset($_POST['delete-file-submit'])) { delete files/update database}

我尝试了几种方法，但每种方法都失败了。非常感谢我如何使用它们的唯一属性（文件名、文件 ID 等）为每个文件设置删除表单的提示。

在此处输入图像描述

标签： javascriptphphtml

解决方案

最好的方法。是使用 AJAX，但如果这必须在 PHP 中，你去：

<?php  
    if (isset($_POST['filename'])) {

        $name = $_POST['filename'];
        $id= $_POST['id'];
        
        //Direction where you store your files
        $target_dir = "/";

        // If u store it by name then do this:
        $target_file = $target_dir . $name;

        // If you store it by id then do this:
        // $target_file = $target_dir . $id; 

        if (file_exists($target_file)) {
            if(unlink($target_file)){
                echo "File". $name ." was removed.";

             }else{
                echo "Error!". $name . "was not removed";
            }   
        }else{
            echo "Could not find file". $name;
        }
    }
?>

当然，这取决于您如何存储数据，但如果它在同一个目录中，这就是方式。

AJAX 函数会像这样，但您必须进行一些更改以使其适合您的代码：

const deleteFiles = (id, filename) => {
    
    //Ask if your user wants to delete file
    let confirmDelete =  confirm("Are you sure you want to delete " + filename + "?");

    //If yes, its doing this
    if(confirmDelete){
        $.post("php/deleteFile.php",
            {
                id: id,
                filename: filename
            },
            function(response){
                alert(response);
            }
        );
    }
};

我的想法是创建这样的元素结构：

<div data-name="name" data-id="id">
     <a>IMAGE HERE</a>
     <button class="delete-file">DELETE</button>
</div>

然后使用类 .delete-file 搜索每个元素并在其上设置监听器以进行单击，如下所示：

document.find(".deleteFile").click(function(){
    deleteFile(this.parent().dataset.id, this.parent().dataset.name);
});

如果你有任何问题，或者不明白某事，现在让我说。

小编辑：正如评论中所说，您将需要额外的消毒剂来保护您的文件名以保持安全，而无需注射。这是一个简单的（如果你需要更高级的，你应该在网上寻找它）：

$name = mb_ereg_replace("([^\w\s\d\-_~,;\[\]\(\).])", '', $name );

推荐阅读