使用 Dropify 删除上传的图片答案

【问题标题】：Delete uploaded image using Dropify使用 Dropify 删除上传的图片
【发布时间】：2020-07-09 14:38:32
【问题描述】：

我继承了一个需要维护的遗留系统。这个系统有一个使用 Dropify 的文件上传。创建新记录时，可以选择图像文件并正确上传。编辑记录时，可以使用此小部件更新新图像，它也可以正常工作。现在我要做的是，在编辑记录时，我希望能够删除与记录关联的现有上传图像。我不知道该怎么做。

当我将鼠标悬停在 imageupload Dropify 小部件上时，我会看到一个“删除”选项，但单击它不会执行任何操作。我检查了代码，发现如下：

$(document).ready(function() 
{
    $('.dropify').dropify();
    // Used events
    var drEvent = $('.dropify-event').dropify();
    drEvent.on('dropify.beforeClear', function(event, element) {
        return confirm("Do you really want to delete \"" + element.filename + "\" ?");
    });
    drEvent.on('dropify.afterClear', function(event, element) {
        alert('File deleted');
    });
});

但是点击 Dropify 小部件上的“删除”既不会触发确认也不会触发警报。

dropify 小部件代码本身如下：

<input 
type="file" 
name="image" 
id="fileChooser" 
class="dropify" 
data-default-file="" />

后端的 PHP 文件上传脚本看起来很标准：

if ($_FILES['image']['name']) 
{
    $productId = getProductId();
    $file_name = $productId . $_FILES['image']['name'];
    $file_size = $_FILES['image']['size'];
    $file_tmp = $_FILES['image']['tmp_name'];
    $file_type = $_FILES['image']['type'];
    $file_ext = strtolower(end(explode('.', $_FILES['image']['name'])));
    move_uploaded_file($file_tmp, "uploads/product/" . $file_name);
}

如果能获得一些关于如何使用 dropify 删除图像的指导，那就太好了。

【问题讨论】：

标签： javascript php dropify

【解决方案1】：

您的输入标签上似乎缺少dropify-event 类。添加后它工作正常。但即使没有类，删除仍然有效，只是它没有花哨的警报消息。也许下面的 sn-p 有效，可以帮助您走上正确的轨道。

$('.dropify').dropify();
// Used events
var drEvent = $('.dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
  return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element) {
  alert('File deleted');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

<input type="file" name="image" id="fileChooser" class="dropify dropify-event" data-default-file="" />

【讨论】：

谢谢您，我会检查一下并告诉您...