在sendMultiple上使用dropzone.js发送formData [英] send formData using dropzone.js on sendingmultiple

问题描述

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

The dropzone.js documentation/wiki doesn't say how to send form fields.

我只是阅读了 FormData对象，其中说明了如何使用表单字段填充对象。问题在于，用整个表单填充对象不会获得数据发送，但是如果我一个接一个地附加表单字段，它们就会被发送...

I just read about the FormData object and it says how to populate the object with the form fields. The problem is that populating the object with the whole form won't get the data send, but if I append the form fields one by one they'll get sent...

这有效：

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

这不是：

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

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

The first example will send the #name field but the second won't send anything (just the files).

如何触发呢？我想让dropzone沿着文件发送整个表单（在同一请求中）。

How can I trigger that? I'd like to make dropzone send the whole form along the files (both in the same request).

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

推荐答案

查看评论...

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

这篇关于在sendMultiple上使用dropzone.js发送formData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！