在发送多个时使用 dropzone.js 发送 formData

Question

dropzone.js 文档/wiki 没有说明如何发送表单字段。

我刚刚阅读了FormData 对象，它说明了如何使用表单字段填充对象。问题是用整个表单填充对象不会发送数据，但是如果我将表单字段一一附加，它们将被发送......

这有效：

formData.append('name', jQuery('#name').val());

这不会：

var myForm = document.querySelector('form');
formData = new FormData(myForm);

第一个示例将发送该#name字段，但第二个示例不会发送任何内容（仅发送文件）。

我怎样才能触发它？我想让 dropzone 沿着文件发送整个表单（都在同一个请求中）。

init: function() {
    var myDropzone = this,
        submitButton = document.querySelector("[type=submit]");

    submitButton.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    });

    myDropzone.on('sendingmultiple', function(data, xhr, formData) {
        // this will get sent
        formData.append('name', jQuery('#name').val());
        // this won't
        var myForm = document.querySelector('form');
        formData = new FormData(myForm);
    });
    myDropzone.on('successmultiple', function(files, response) {
        //window.location.replace("/home");
    });
    myDropzone.on('errormultiple', function(files, response) {
        alert(response);
    });
}

Answer 1

看评论...

myDropzone.on('sendingmultiple', function(data, xhr, formData) {

    // this will get sent
    formData.append('name', jQuery('#name').val());

    // this won't -- we don't need this rn, we can just use jQuery
    // var myForm = document.querySelector('form');

    // you are overwriting your formdata here.. remove this
    //formData = new FormData(myForm);

    // instead, just append the form elements to the existing formData
    $("form").find("input").each(function(){
        formData.append($(this).attr("name"), $(this).val());
    });
});