时间戳

首页 > 解决方案 > 使用 Dropify 删除上传的图片

javascript - 使用 Dropify 删除上传的图片

问题描述

我继承了一个需要维护的遗留系统。这个系统有一个使用 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 删除图像的一些指示会很棒。

标签： javascriptphpdropify

解决方案

看起来您缺少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="" />

推荐阅读