将普通表单与文件输入与拖放区相结合

Combine normal form with file inputs with dropzone

本文关键字：输入 拖放区 相结合 文件 表单      更新时间：2023-09-26

我在将"正常"形式与拖放区相结合时遇到问题。我有一个包含文本输入、文件输入和拖放区部分的表单。我想一次发布所有内容。所以我正在手动创建拖放区字段，我正在禁用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 发出 complete 事件时，您将发送其余的输入字段。

相关文章：