结合正常形式与多个下降区 [英] Combine normal form with multiple dropzones

问题描述

我想在一个表单中有多个放置区.所以我创建了一个表格

I want to have multiple dropzones in a form. So I created a form

<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初始化.

The dropzones are initialized with its own paramName.

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

this.dropzones = dropzones;

如何在一个请求中使用表单数据提交多个放置区?目前，提交时看起来像这样.

How to submit multiple dropzones with the form data in one request? Currently it look like this on submit.

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

I know this https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone but this is only for one dropzone in one form.

我认为我需要做的是在提交时将文件从第二，第三，... dropzone添加到第一，但是我不知道该如何处理.

What I think I need todo is to add the files from the second, third, ... dropzone to the first when submitting but I dont know how to handle that.

推荐答案

我找到了与多个放置区一起使用的解决方案，在表单提交上，您需要执行以下操作.

I found a solution to work with multiple dropzones, on the form submit you need to do the following.

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

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

return false;

这将处理第一个放置区.现在，我们需要在 sendingmultiple 事件

This will process the first dropzone. Now we need to add the other dropzones files to the submit in the sendingmultiple event

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
                );
            }
        }
    });
}

这篇关于结合正常形式与多个下降区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！