将标准形式与文件输入与 dropzone 相结合答案

【问题标题】：Combine normal form with file inputs with dropzone将标准形式与文件输入与 dropzone 相结合
【发布时间】：2015-03-15 12:37:27
【问题描述】：

我在将“正常”表单与 dropzone 结合使用时遇到了问题。我有一个带有文本输入、文件输入和 dropzone 部分的表单。我想一次发布所有内容。所以我手动创建了 dropzone 字段，我禁用了 dropzone 的autoProcessQueue 功能并绑定到提交按钮的onClick。

<form action="/Exhibits/Create" enctype="multipart/form-data" id="newExhibitForm" method="post">
    <input id="Exhibit_Name" name="Exhibit.Name" type="text"
    <input id="Exhibit_Description" name="Exhibit.Description" type="text">

    <input id="ModelFile" name="ModelFile" type="file">
    <input id="TextureFile" name="TextureFile" type="file">

    <div id="dropzonePreview" class="dropzone-previews form-control dz-clickable">
        <div class="dz-message">Drag&drop</div>
    </div>

    <input type="submit" value="Create" class="btn btn-default">
</form>

JS部分：

var photoDropzone = new Dropzone("#newExhibitForm", {
    url: $('#newExhibitForm').attr("action"),
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 10,
    previewsContainer: '#dropzonePreview',
    clickable: '#dropzonePreview',

    // The setting up of the dropzone
    init: function () {
        var myDropzone = this;

        var submitButton = document.querySelector('input[type=submit]');
        myDropzone = this; // closure

        submitButton.addEventListener("click", function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (myDropzone.getQueuedFiles().length === 0) {
                $('#newExhibitForm').submit();
            }
            else {
                myDropzone.processQueue();
            }
        });
    }
});

当我通过单击提交按钮提交表单时，在服务器端功能中有 dropzone 文件、文本输入，但不发送文件输入。

有没有办法让它按照我开头描述的方式工作？

问候，
康拉德

【问题讨论】：

标签： javascript file-upload dropzone.js

【解决方案1】：

很抱歉，当时每个文件都是单独上传的。因此，您需要将文件单独存储在服务器上，然后当 dropzone 发出 complete 事件时，您将发送其余的输入字段。

【讨论】：