Dropzonejs 删除文件而不调用删除回调

Question

我正在使用 Dropzonejs 上传文件以在我的模块中使用。它的工作方式是您编辑一个项目，将文件拖到拖放区，拖放区隐藏，然后您会看到图像的预览。该预览是自制的，并有一个删除按钮，用于删除图像并使数据库中的列无效。

要删除文件，dropzone .on 调用 removedfile。这被放在一个看起来像这样的全局函数中（仅包含问题的重要数据）：

function createDropzone(removeCallback, id) {
    $('#' + id).dropzone({
        url: 'URL TO UPLOAD FILE',
        init: function() {
            var myDropzone = this;

            this.on('removedfile', function(file) {
                $.post('URL TO DELETE FILE', {file: file}, function(response) {
                    // handle delete
            } 
        },
    }
}

现在在这个特定模块中，当有人上传图片时，它必须隐藏 dropzone 元素并显示自定义预览元素。但是，如果有人希望删除图像，则必须从拖放区中删除文件，并且运行通过自定义预览单击删除图标时的单击事件。

但问题是，如果图像存在，它不会将图像添加到拖放区，您会立即看到自定义预览。因此，我不能简单地调用 dropzone removeallfiles 函数，因为 dropzone 并不总是包含图像。但是当我调用 removeallfiles 函数并且事件被调用并且图像在 dropzone 中时，它会尝试删除文件两次。

有没有什么方法可以在不调用 removedfiles 的情况下从拖放区中删除所有文件？

（如果我解释的不好请见谅，现在还是凌晨，我可以解释的更好）

Answer 1

我正在使用 Dropzone 的 addedfile 事件来删除之前的所有非最终上传尝试，如下所示：

init: function() {
    var myDropzone = this;
    this.on('addedfile', function(file) {
        if (this.files.length > 1) {
            this.removeFile(this.files[0]);
        }
    });
}

然后在提交时，我正在处理文件：

$('input[type="submit"]').on("click", function (e) {
    // Make sure that the form isn't actually being sent.
    if (myDropzone.getQueuedFiles().length > 0) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    }
});

希望对您有所帮助:)

Answer 2

我很笨，我已经检查了 removeFiles 回调（在我的原始代码中），这样如果特定元素不存在，它就不会执行 AJAX 文件。

this.on('removedfile', function (file) {
    if (file.previewTemplate.children[6]) {
            // $.POST CODE HERE
    }
}

此元素是在 successmultiple 事件中创建的，如下所示：

previewTemplate.append('<input type="hidden" name="fileNames[]" value="' + ajaxResponse.filenames[i] + '">');
previewTemplate.append('<input type="hidden" name="extensions[]" value="' + ajaxResponse.extensions[i] + '">');

这样，当元素被删除时，它不会进入 IF，但仍会从拖放区中删除。这样，您可以从拖放区中删除所有文件，而无需调用删除文件 AJAX.

Dropzonejs 删除文件而不调用删除回调

Dropzonejs remove files without calling remove callback

dropzone.js