为什么jQuery.fler插件不使用Ajax / PHP删除图像？

Question

我正在使用以下插件上传图片。

插件网址：

http://filer.grandesign.md/

上传图片后，它会向我显示预览，并且有一个删除图标以删除上传的图片。 像波纹管图像：（请参见红色水桶图标）

该插件使用以下php代码删除上传文件：

<?php 
if(isset($_POST['file'])){
    $file = 'images/menu_images/' . $_POST['file'];
    if(file_exists($file)){
        unlink($file);
        echo 'file deleted';        
    }
}
?>

我现在在做什么：

当我上传图片时，我重命名了上传的图片并保存到名为images/menu_images/的文件夹中。

但是，当我尝试删除上传的文件时，并不是删除文件，因为我重命名了原始上传的文件并将其保存到文件夹中。

因此，要解决此问题，我正在使用以下php代码来print/echo显image name ， product id (p_id)和user id (u_id)

看到这一行：echo $ all_images。'|'。$ session_last_id。'|'。$ u_id;

$files = array();
foreach ($_FILES['files'] as $k => $l) {
   foreach ($l as $i => $v) {
       if (!array_key_exists($i, $files))
           $files[$i] = array();
       $files[$i][$k] = $v;
   }
}

foreach ($files as $file) {

    $handle = new upload($file);
    $file = $file['name'];
    $ext  = explode('.', $file);
    $ext = $ext[1];

    if ($handle->uploaded) {

        $handle->file_new_name_body     = 'mpic_list_'.uniqid('', true);
        $menu_list_image = $handle->file_new_name_body.'.'.$ext;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;
        $handle->image_x               = 360;
        $handle->image_y               = 240;   

        $handle->process('images/menu_images/');    

        $handle->file_new_name_body     = 'mpic_small_'.uniqid('', true);
        $menu_small_image = $handle->file_new_name_body.'.'.$ext;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;  
        $handle->image_x               = 100;
        $handle->image_y               = 65;

        $handle->process('images/menu_images/');

        $handle->file_new_name_body     = 'mpic_large_'.uniqid('', true);
        $menu_large_image = $handle->file_new_name_body.'.'.$ext;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;  
        $handle->image_x               = 700;
        $handle->image_y               = 470;

        $handle->process('images/menu_images/');

        if ($handle->processed) {           
            $all_images = $menu_list_image . $menu_small_image . $menu_large_image;
            $u_id = (int) $_SESSION['logged_user_id'];

            if(!isset($_SESSION['last_id'])) {
                // insert upload image section data...
                $insert_menu_details = mysqli_query($conn, "INSERT INTO products (p_id) VALUES ('')");
                $last_id = mysqli_insert_id($conn);
                $insert_upload_image = mysqli_query($conn, "INSERT INTO product_images VALUES ('', '$menu_large_image', '$menu_list_image', '$menu_small_image', '$last_id', '$u_id')");    
                $_SESSION['last_id'] = $last_id;

                $all_images = "$menu_large_image";
                echo $all_images.'|'.$last_id.'|'.$u_id;
            } else {
                // update upload image section data
                $session_last_id = $_SESSION['last_id'];
                $update_upload_image = mysqli_query($conn, "INSERT INTO product_images VALUES ('', '$menu_large_image', '$menu_list_image', '$menu_small_image', '$session_last_id', '$u_id')");    

                $all_images = "$menu_large_image";
                echo $all_images.'|'.$session_last_id.'|'.$u_id;
            }



            $handle->clean();
        } else {
            //echo 'error : ' . $handle->error;
            echo 'Error';
        }
    }   
}

然后，在ajax成功方法中，我正在使用以下代码来获取打印的图像名称，产品ID和用户ID，以调用另一个ajax方法来删除单个上载的图像：

success: function(data, el){

var parent = el.find(".jFiler-jProgressBar").parent();

el.find(".jFiler-jProgressBar").fadeOut("slow", function(){

    $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success <a id=\"deleteImage\">Delete Me</a></div>").hide().appendTo(parent).fadeIn("slow").each(function() {

        $('#deleteImage').on('click', function() {
            var params = data.split('|');
            var url = "delete_upload_image?p1=" + params[0] +"&p2=" + params[1] + "&p3=" + params[2];
            // Make AJAX call as you want to url
            $.get(url);
        }); 
    }) 
});

但是问题是：

1）当我单击delete me链接以删除上传的图像时，它将删除数据库中的所有图像，但是应该仅删除我选择的图像

在控制台日志中，它正在调用Ajax 3次！ 但是ti应该是1 ajax调用：像下面这样：

2）您看到图片上有3张上传的图片。 我只能在第一个上传的图像上调用ajax，但不能在其他2个上传的图像上调用ajax。

Answer 1

看起来您那里有三个图像，然后在代码中有：

$('#deleteImage').on('click',

在forEach循环中完成。 无需将单击处理程序添加到单个图像，而是每次将其添加到所有图像。 因此，使用3张图片，您为每个点击事件获得3个点击处理程序，因此您要调用AJAX 3次-每个附加的点击处理程序一次。

尝试更改您的代码，使其不会在循环中附加点击处理程序。 对其进行重构，以使其在循环外完成，只需一次，或者可以使用如下所示的内容：

$('#deleteImage', $(this)).on('click',

要只设置一次，请为所有这些图像找到父标记，并在初始化时调用类似的方法，而不是：

$($parentOfAllImages).on('click', '#deleteImage',