在 MVC 编辑器模板中使用拖放区.js

Question

我在MVC 5编辑器模板中使用dropzone.js时遇到了一些问题。我有一个包含完整表单的分部视图，它非常大，在该分视图中，我调用编辑器模板，其中我使用 dropzone.js。在表单提交（使用自定义按钮和jquery.form.js实现）时，模型被回发，模型的属性之一是文件。

编辑器模板代码：

<div class="col-md-7 col-lg-7 col-sm-6 col-xs-12">
                <div class="dropzone" id="filesDropZone">
                    @Html.TextBoxFor(model => model.attachmentFiles, new { type = "file", multiple = "true" })
                    @Html.ValidationMessageFor(model => model.attachmentFiles)
                </div>
            </div>

JS代码：

Dropzone.options.filesDropZone = 
        {
            url: '@ViewBag.ActionUrl',
            autoDiscover: false,
            autoProcessQueue: false,
            paramName: "attachmentFiles",
            uploadMultiple: true
        };

现在我面临的两个问题是：

1. 此代码在 chrome 中不起作用（我无法将文件拖放到拖放区），而在 IE10 中工作。我尝试使用document.ready或使用new Dropzone但相同的结果。
2. 单击保存按钮时，将调用一个包含完整模型的操作，但是当我使用Dropzone时，我必须在单击按钮时写入processQueue并且该操作被调用两次。一个带有附件，没有其他数据，一个带有数据而不是附件。我想要的是，它只调用一次，所有表单数据包括附件。

任何帮助，不胜感激。如果这是唯一的方法，我什至愿意使用任何其他更好的库或编写自定义代码。

谢谢。

Answer 1

您必须阻止要提交的表单，加载文件，然后提交。表格之所以提交两次，是因为功能：processQueue()的dropzone也提交表单...因此，您必须使用processQueue()或form.submit提交它（如果没有附件）

$("button[type=submit]").on("click", function (e) {
    // Make sure that the form isn't actually being sent.
    var form = $(this).closest('form');
    if (form.valid() == true) {
        if (myDropzone.getQueuedFiles().length > 0) {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        } else {
            form.submit();
            //myDropzone.uploadFiles([]); //send empty
        }
    }
});