在 MVC 编辑器模板中使用 Dropzone.js答案

【问题标题】：Using Dropzone.js in MVC Editor template在 MVC 编辑器模板中使用 Dropzone.js
【发布时间】：2016-04-27 07:26:20
【问题描述】：

我在 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
        };

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

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

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

谢谢。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-5 dropzone.js

【解决方案1】：

您必须阻止提交表单，加载文件然后提交。表单提交两次的原因是dropzone的processQueue()函数也提交表单...所以你必须使用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
        }
    }
});

【讨论】：