javascript - 将普通形式与文件输入与 dropzone 结合起来

Question

我在将“正常”形式与 dropzone 结合使用时遇到问题。我有一个带有文本输入、文件输入和拖放区部分的表单。我想立即发布所有内容。因此，我手动创建 dropzone 字段，禁用 dropzone 的 autoProcessQueue 功能并绑定(bind)到提交按钮的 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 文件、文本输入，但不发送文件输入。

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

问候，
康拉德

Answer 1

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