使用Dropify删除上传的图像

Question

我继承了一个需要维护的遗留系统。这个系统有一个文件上传使用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删除图像的提示，那将是一件很棒的事情。

Answer 1

看起来您的输入标记上缺少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="" />