DropZonejs：提交没有文件的表单

Question

我已成功地将 dropzone.js 集成到现有表单中。此表单发布附件和其他输入，如复选框等。

当我提交带有附件的表单时，所有输入都正确发布。但是，我想让用户可以在没有任何附件的情况下提交表单。 Dropzone 不允许表单提交，除非有附件。

有谁知道我可以如何覆盖此默认行为并提交不带任何附件的 dropzone.js 表单？谢谢！

   $( document ).ready(function () {
    Dropzone.options.fileUpload = { // The camelized version of the ID of the form element

      // The configuration we've talked about above
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 50,
      maxFiles: 50,
      addRemoveLinks: true,
      clickable: "#clickable",
      previewsContainer: ".dropzone-previews",
      acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-excel.addin.macroEnabled.12, application/vnd.ms-excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-powerpoint,.pptx",



        // The setting up of the dropzone
      init: function() {
        var myDropzone = this;

        // First change the button to actually tell Dropzone to process the queue.
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
          // Make sure that the form isn't actually being sent.
          e.preventDefault();
          e.stopPropagation();
          myDropzone.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() {
          // Gets triggered when the form is actually being sent.
          // Hide the success button or the complete form.
        });
        this.on("successmultiple", function(files, response) {
            window.location.replace(response.redirect);
            exit();
        });
        this.on("errormultiple", function(files, response) {
          $("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
          exit();
        });

      }

    }
  });

Answer 1

使用以下内容：

$('input[type="submit"]').on("click", function (e) {

                    e.preventDefault();
                    e.stopPropagation();

                    var form = $(this).closest('#dropzone-form');
                    if (form.valid() == true) { 
                        if (myDropzone.getQueuedFiles().length > 0) {                        
                            myDropzone.processQueue();  
                        } else {                       
                            myDropzone.uploadFiles([]); //send empty 
                        }                                    
                    }               
                });

参考：https://github.com/enyo/dropzone/issues/418

Answer 2

您应该检查队列中是否有文件。如果队列为空，直接调用 dropzone.uploadFile()。此方法需要您传入一个文件。如 [caniuse][1] 所述，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();
}

Answer 3

根据您的情况，您可以简单地提交表单：

if (myDropzone.getQueuedFiles().length > 0) {                        
   myDropzone.processQueue();  
} else {                       
   $("#my_form").submit();
}

Answer 4

第一种方法对我来说有点太贵了，我不想深入研究源代码并修改它，

如果你恰好和我一样，就用这个吧。

function submitMyFormWithData(url)
    {
        formData = new FormData();
        //formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );

        $.ajax({
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',

                success: function(data){
                alert(data);
                }
        });
    }

在你的 dropzone 脚本中

$("#submit").on("click", function(e) {
                      // Make sure that the form isn't actually being sent.
                      e.preventDefault();
                      e.stopPropagation();

                        if (myDropzone.getQueuedFiles().length > 0)
                        {                        
                                myDropzone.processQueue();  
                        } else {                 
                                submitMyFormWithData(ajaxURL);
                        }     

                    });

Answer 5

我尝试了 Matija Grcic 的回答，但出现以下错误：

Uncaught TypeError: Cannot read property 'name' of undefined

而且我不想修改 dropzone 源代码，所以我做了以下操作：

        if (myDropzone.getQueuedFiles().length > 0) {                        
            myDropzone.processQueue();  
        } else {                       
            myDropzone.uploadFiles([{name:'nofiles'}]); //send empty 
        }                                    

注意：我将数组中的一个对象传递给 uploadFiles 函数。

然后我检查服务器端，如果 name != 'nofiles' 确实上传东西。

Answer 6

很简单，只有当你有文件要通过 Dropzone 提交时，你才停止传播：

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
  // Stop the propagation ONLY if you have files to be submitted via Dropzone
  if (myDropzone.getQueuedFiles().length > 0) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
  }
});

Answer 7

我已经成功使用了：

submitButton.addEventListener("click", function () {  
  if(wrapperThis.files.length){
        error = `Please select a file`; 
    } else {
        wrapperThis.processQueue(); 
    }
});