使用Dropify删除上传的图片

Question

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

当我将鼠标移到imageupload Dropify小部件上时，我会看到一个"Remove“选项，但点击它不会做任何事情。我检查了代码，发现了以下内容：

$(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上的"Remove“小部件既不会触发确认，也不会触发警报。

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删除图像的建议，那就太好了。

Answer 1

看起来您的input标记上缺少dropify-event类。在添加之后，它工作得很好。但是，即使没有这个类，删除仍然有效，除非它没有花哨的警告消息。也许下面的代码片段可以帮助您走上正确的道路。

​

$('.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="" />

​