DropZonejs：提交不包含文件的表单 [英] DropZonejs: Submit form without files

问题描述

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

I've successfully integrated dropzone.js inside an existing form. This form posts the attachments and other inputs like checkboxes, etc.

当我提交带有附件的表单时，所有输入均正确发布。但是，我希望用户可以提交不带任何附件的表格。除非有附件，否则Dropzone不允许提交表单。

When I submit the form with attachments, all the inputs post properly. However, I want to make it possible for the user to submit the form without any attachments. Dropzone doesn't allow the form submission unless there is an attachment.

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

Does anybody know how I can override this default behavior and submit the dropzone.js form without any attachments? Thank you!

   $( 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();
        });

      }

    }
  });

推荐答案

使用以下命令：

$('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

这篇关于DropZonejs：提交不包含文件的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！