使用 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="" />