Question

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

要删除文件，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中删除文件并在自定义预览单击删除图标时运行click事件。

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

有没有办法在不调用removedfiles的情况下从dropzone中删除所有文件？

（对不起，如果我的解释不好，现在仍然很早，我可以更好地解释）

Answer 1

我使用Dropzone＆＃39; 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();
    }
});

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

{{1}}

我希望它有所帮助：）

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，但仍然会从dropzone中删除。这样，您可以从dropzone中删除所有文件，而无需调用删除文件AJAX。

Dropzonejs删除文件而不调用remove callback

2 个答案: