当dropzone集成在表单中时,表单提交两次

时间:2022-04-13 09:37:14

I'm using dropzone in a form. The form already contains fields. When user submits the form, the action (in my case the controller) pointed to the form is called twice: the first with the dropzone files and one second time without the files, why? How can I prevent to re-post the same form the second time?

我在表单中使用dropzone。表单已包含字段。当用户提交表单时,指向表单的操作(在我的情况下是控制器)被调用两次:第一次使用dropzone文件,第二次没有文件,为什么?如何防止第二次重新发布同一表格?

Here is what I've did:

这就是我所做的:

HTML:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "myForm" }))
{
... some fields...
<div class="fallback">
                    <!-- this is the fallback if JS isn't working -->
                    <input name="files" type="file" multiple />
                </div>
... submit button ...
}

JS:

// autodiscover at false otherwise, dropzone will attach twice
        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone('#myForm', {
            paramName: 'files',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 25,
            maxFiles: 25
        });

        $("form").on("submit", function (event) {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });

Thanks to read and maybe help me :-)

感谢阅读并可能帮助我:-)

1 个解决方案

#1


Try jQuery .one() This ensures the form is submitted only once.

试试jQuery .one()这样可以确保表单只提交一次。

$("form").one("submit", function (event) {
    event.preventDefault();
    myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    window.location.href = "Index.aspx"; //Specify the file name and path
});

#1


Try jQuery .one() This ensures the form is submitted only once.

试试jQuery .one()这样可以确保表单只提交一次。

$("form").one("submit", function (event) {
    event.preventDefault();
    myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    window.location.href = "Index.aspx"; //Specify the file name and path
});