Question

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

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

这有效：

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

Answer 2

init: function() {
  this.on("sending", function(file, xhr, formData) { 

    //formData.append('task_name', jQuery('#task_name').val());

    $("form").find("input").each(function(){
      formData.append($(this).attr("name"), $(this).val());
  });
  
  });

}

在sendingmultiple上使用dropzone.js发送formData

2 个答案: