按名称删除 table 行

Question

我正在使用 dropzone.js 将图像文件存储到文件夹中。问题是，所有上传的图片预览仅在 dropzone field 内显示，只要在同一页面上没有刷新或切换到其他 link，因此这些图片只能在上传后立即删除（如果我在这里错了，请纠正我）。

由于这种情况，我有了一个想法，通过保存信息（例如文件名、大小、link、类型等）以及上传到 MySQL 数据库，然后进行查询对于 table 输出，这样我就可以稍后从 table 行中删除某个图像文件。

通过单击垃圾桶（观看附图），通常文件中的名称应由 jQuery 获取，然后由 AJAX 发送至 PHP，因此该行可以从数据库中删除，文件从文件夹中取消link。它以某种方式在 ID 上运行良好，但在 name 上运行良好。我在这里看不到可能的错误，因此我需要你的帮助。我需要 NAME 由 jQuery 而不是 ID 获取，这一点非常重要。它甚至可以这样工作吗？如果是这样，如何？如果没有，怎么办？

<table class="table table-striped table-hover droplist">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>filename</th>
                        <th>size[bytes]</th>
                        <th>image</th>
                        <th>type</th>
                        <th>created_at</th>
                        <th>delete</th>
                    </tr>
                </thead>

<?php 
$statement = $pdo->prepare("SELECT * FROM file_upload ORDER BY id");
$result = $statement->execute();
$count = 1;
while($row = $statement->fetch()) {
    echo '<tr name="'.$row['name'].'">';
        echo "<td>".$count++."</td>";
        echo "<td>".$row['name']."</td>";
        echo "<td>".$row['size']."</td>";
        // echo '<td><a href="'.$row['link'].'">'.$row['link'].'</a></td>';
        echo "<td>".$row['type']."</td>";
        echo "<td>".date('d.m.Y H:i:s',strtotime($row['date']))."</td>";
        echo '<td><a class="delete" href="#"><i class="fa fa-trash" ></i></a></td>';
    echo "</tr>";
}
?>

dropzonelist.js:

$('table.droplist td a.delete').click(function(e) {
    e.preventDefault();
    var name = $(this).parent().parent().prop('name');
    var data = 'name=' + name ;
    var parent = $(this).parent().parent();
    // alert(name),

    $.ajax({
        type: "POST",
        url: "delete_dropfile.php",
        data: data,
        cache: false,
        success: function(response) { 
            //...whatever

顺便说一句，alert(name) 一直在说：undefined！ IDK

PHP 脚本：

if(isset($_POST['name'])) {
    $file = $_POST['name'];
} else {
    die;
} 

// sql to delete a record
$filedel = "DELETE FROM file_upload WHERE name='$file'";
if ($pdo->exec($filedel)) {
    echo "(image)file successfully erased!";
}
unlink($_SERVER['DOCUMENT_ROOT'] . '/anydaynow/gallery/samples/' . $file);
?>

Answer 1

Javascript错误

您的 javascript 有问题。这是错误的。

var data = 'name=' + name ;

有时它会起作用，但是当文件名包含非字母数字字符时，即使是 space 这也会中断。例如，如果文件名是 hello world.jpg 它将被发送到服务器，但服务器希望它是 hello+world.jpg 你应该改为

 var data = {'name': name }

PHP 错误

这也是错误的。

 $filedel = "DELETE FROM file_upload WHERE name='$file'";

特殊字符会破坏这一点，更糟糕的是它可能会导致 sql 注入。修正为

$filedel = $pdo->prepare("DELETE FROM file_upload WHERE name=:file");
$filedel->execute(array(":file"=>$file));

Answer 2

而不是使用prop() to get the data, you need to use attr()：

var name = $(this).parent().parent().attr('name');

您只能对 <tr> 支持的 tags 使用 prop()，例如 class 和 id，在您的情况下，您不支持使用 name。 attr() 可用于不同的不受支持的标签。

另一种方法：

一种方法是直接在 <a> 上分配一个新标签，而不是通过父标签两次：

echo '<td><a class="delete" href="#" data-artname="'.$row['name'].'">...

所以，不是使用以下方法获取名称：

var name = $(this).parent().parent().attr('name');

您可以通过以下方式获取对应的姓名数据：

var name = $(this).attr('data-artname');

您可以查看此 fiddle 作为示例。

^{你还需要考虑@e4c5}

的回答和推荐

按名称删除 table 行

delete table row by name

php

mysql

ajax

jquery

dropzone.js

Javascript错误

PHP 错误

另一种方法：