Question

我希望在表单中有多个dropzones。所以我创建了一个表单

<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>

使用自己的paramName初始化dropzone。

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

this.dropzones = 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

我找到了一个解决方案，可以在表单上使用多个dropzone，提交以下内容。

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

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

return false;

这将调用处理第一个dropzone。知道我们需要将其他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
                );
            }
        }
    });
}

将正常形式与多个下降区组合

1 个答案: