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

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

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

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

感谢。

Answer 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
        }
    }
});

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

1 个答案: