我想在一个表单中有多个拖放区。所以我创建了一个表单
<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 中的文件添加到第一个,但我不知道如何处理。
最佳答案
我找到了一个处理多个拖放区的解决方案,在提交表单时您需要执行以下操作。
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
);
}
}
});
}
关于javascript - 将普通形式与多个拖放区相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40506888/