使用 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 eventsvar drEvent = $('.dropify-event').dropify();drEvent.on('dropify.beforeClear', function(event, element) {&nbsp; return confirm("Do you really want to delete \"" + element.file.name + "\" ?");});drEvent.on('dropify.afterClear', function(event, element) {&nbsp; 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="" />