将普通形式与多个拖放区相结合

Question

我想在一个表单中有多个拖放区。所以我创建了一个表单

<form method="post">
    <div class="upload-files" data-name="mainImages[]" />
    <div class="upload-files" data-name="secImages[]" />
    <!-- could also be more -->

    <input type="text" name="test" />

    <input type="submit" />
</form>

dropzones 使用自己的 paramName 进行初始化。

var dropzones = [];
$('.upload-files').each(function() {
    dropzones.push(new Dropzone('#' + $dropzone.attr('id'), {
       paramName: $(this).data('name'),
       // ...
    }
);

this.dropzones = dropzones;

如何在一次请求中提交带有表单数据的多个拖放区？目前提交时看起来像这样。

// submit
if (this.dropzones.length) {
    return true; // normal form submit without dropzone
}

// dropzone submit form
for (var i = 0, length = this.dropzones.length; i < length; i++) {
    // TODO combine files with correct paramNames
}

我知道这个 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone 但这仅适用于一种形式的一个 dropzone。

我想我需要做的是在提交时将第二个、第三个……dropzone 中的文件添加到第一个，但我不知道如何处理。

Answer 1

我找到了使用多个拖放区的解决方案，在提交表单时您需要执行以下操作。

if (!this.dropzones.length) {
    // default form submit
    return true;
}

// submit over dropzone
event.preventDefault();
this.dropzones[0].processQueue();

return false;

这将处理第一个放置区。现在我们需要将其他 dropzones 文件添加到 sendingmultiple 事件

中的提交

init: function() {
    this.on('sendingmultiple', function(data, xhr, formData) {
        // add other form fields
        $.each($form.serializeArray(), function(index, item) {
            formData.append(item.name, item.value);
        });

        // add other dropzone files
        for (var i = 1, length = this.dropzones.length; i < length; i++) {
            var files = this.dropzones[i].getQueuedFiles();

            for (var x = 0, fileLength = files.length; x < fileLength; x++) {
                formData.append(
                    this.dropzones[i]._getParamName(x),
                    files[x],
                    files[x].name
                );
            }
        }
    });
}

将普通形式与多个拖放区相结合

Combine normal form with multiple dropzones

javascript

jquery

dropzone.js