我可以在不上传任何文件的情况下使用Dropzone提交表格吗 - Can I submit a form with Dropzone without uploading any files?

我遵循了将Dropzone与Normal Form结合的教程，以允许Dropzone上传&提交表格。该表格是一个申请表，应该与&没有添加文件。目前，只有当一个或多个文件添加到Dropzone时，它才能工作。

有没有一个选项可以让Dropzone在上传队列为空的情况下处理表单提交？

以下是我如何初始化表单：

                Dropzone.options.general = {
                paramName: 'tx_ddapplicationform_applicationformgeneral[form][files]', // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,
                previewsContainer: '.dropzone-previews', // we specify on which div id we must show the files
                clickable: false,

                // The setting up of the dropzone
                init: function() {
                    var myDropzone = this;
                    console.log(myDropzone)
                    console.log("Dropzone init");
                    console.log(this.element.querySelector("input[type=submit]"))
                    // First change the button to actually tell Dropzone to process the queue.
                   this.element.querySelector("input[type=submit]").addEventListener("click", function(e) {
                        // Make sure that the form isn't actually being sent.
                        console.log("the button is clicked")
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                        console.log("after processQueue")
                    });
                    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                    // of the sending event because uploadMultiple is set to true.
                   this.on("sendingmultiple", function() {
                        console.log("sending multiple");
                    });
                    this.on("successmultiple", function(files, response) {
                        console.log("success multiple");
                    });
                    this.on("errormultiple", function(files, response) {
                        console.log("error multiple");
                    });
                }

我浏览了dropzone.js表单并添加了console.log来查看发生了什么

 processQueue dropzone.js:1301
 upload multiple dropzone.js:1314
 sending multiple main.jquery.js:551
 after processQueue main.jquery.js:545
 success multiple main.jquery.js:554

提交不成功，没有附加文件，记录如下：

 processQueue dropzone.js:1301
 after processQueue main.jquery.js:545

好吧，可能是一篇死讯，但由于我在谷歌结果页面的第一个链接中发现了这个问题，而且它已经被浏览了很多次，我认为答案不会伤害任何人。

我有同样的结构，为了解决问题，我只做：

$('#my-dropzone input[type="submit"]').on('click', function(
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();
    if (myDropzone.files.length) {
        myDropzone.processQueue(); // upload files and submit the form
    } else {
        $('#my-dropzone').submit(); // just submit the form
    }
});

请注意，如果您使用dropzone提交表单(第一种情况(，则是通过ajax进行的，因此结果应该由返回的响应处理，而如果您只提交表单(第二种情况(则会有一个正常的表单提交。

在我的案例中，这需要根据提交的类型做出不同的回应。

您应该检查队列中是否有文件。如果队列为空，则直接调用dropzone.uploadFile((。此方法需要传入一个文件。正如canius上所说，IE/Edge不支持File构造函数，所以只需使用Blob API，因为File API就是基于此。

dropzone.uploadFile((中使用的formData.append((方法要求您传递一个实现Blob接口的对象。这就是为什么你不能通过一个正常的物体。

dropzone 5.2.0版本需要upload.chunked选项

if (this.dropzone.getQueuedFiles().length === 0) {
    var blob = new Blob();
    blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
    this.dropzone.uploadFile(blob);
} else {
    this.dropzone.processQueue();
}