如果不满足条件，如何在 Dropzone.js 中取消/中止上传？

Question

我正在使用 Dropzone.js 上传文件。现在我想检查一个文件是否已填写，如果不是则取消上传。

我的 HTML 代码：

 <input type="text" name="title" id="title" placeholder="Type the title of the album">
<form action="file-upload.cgi" enctype="multipart/form-data" class="dropzone" id="dropzoneform"></form>

我的 jQuery 代码：

 Dropzone.autoDiscover = false;
$('.dropzone').dropzone({
    acceptedFiles: 'image/jpeg',
    init: function() {
        this.on('sending', function() {
            if ( $('#title').val().length > 0 ) {
                // just start automatically the uploading
            } else {
                // need a code to cancel the uploading
            }
        });
    }
});

#title 的长度为0时如何取消上传？

原文由 netdjw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

那这个呢

Dropzone.autoDiscover = false;
$('.dropzone').dropzone({
    acceptedFiles: 'image/jpeg',
    init: function() {
        var that = this;
        that.on('sending', function(file) {
            if ( $('#title').val().length <= 0 ) {
                that.removeFile(file);
            }
        });
    }
});

原文由 code-jaff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您想完全删除文件，则接受的答案有效；但是，如果您想让用户可以选择再次尝试提交同一文件而不必将其重新添加到 dropzone，则需要更改一些有关文件处理方式的内容。

首先，您需要在初始化 dropzone 时将 autoQueue 属性设置为 false：

 $('.dropzone').dropzone({
    autoQueue: false,
    /* The rest of your configuration options */
});

这可以防止 Dropzone 在用户添加文件后立即自动尝试上传每个文件。这意味着现在您必须使用以下函数以编程方式实际将文件排入队列：

  var yourDropzone = $('.dropzone');
 yourDropzone.on("addedfile", function(file) {
     if (/* some condition is met by your file */) {
         yourDropzone.enqueueFile(file);
     }
 }

这样，每当用户选择要上传的文件时，我们都可以检查是否满足某些任意条件。只有当这是真的时，我们才会将文件排入队列以上传到服务器。

这种方法的优点是现在我们可以实际选择文件何时上传，而不是在 Dropzone 尝试发送排队文件时尝试将其从队列中删除。

这也允许其他更高级的功能；例如，为每个文件添加一个按钮，让用户选择何时尝试上传文件。

原文由 Lalo Sánchez 发布，翻译遵循 CC BY-SA 3.0 许可协议