如何在 dropzone.js 中连同文件一起提交隐藏的输入字段

Question

我是这个 dropzone.js 的新手，我怀疑如何将隐藏的输入字段值与文件一起提交。这是我尝试过的代码，如果我在某些地方出错，可以帮助指导我。

HTML和php代码：

<?php for($i=0; $i= const; $i++){?>
<form id="upload1" method="post" enctype="multipart/form-data">
  <input type="hidden" id="key" name="key" value="<?php echo $key;?>">
  <div id="dZUpload-<?php echo $i?>" class="dropzone dZUpload">
    <div class="dz-default dz-message"></div>
    <button type="button" class="btn btn-primary pull-right submit_files" id="<?php echo $key;?>">Submit this form!</button>
  </div>
</form>
<?php } ?>
<input type="hidden" id="testkey" value=""/>

这是我的 javacript 代码：

for (var i = 1; i <= $('.dropzone').length; i++) {
$("#dZUpload-"+i).dropzone({
  url: "<?php echo site_url('uploadfiles.html');?>",
  paramName: "file",
  maxFilesize: 2,
  autoProcessQueue: false,
  addRemoveLinks: true,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  init: function() {          
     var myDropzone = this; // closure 
     $(".submit_files").off().on("click", function(e) {
             var key = $(this).attr('id');
             e.preventDefault();
             e.stopPropagation();
             myDropzone.on("sending", function(file, xhr, formData) {                      
               formData.append("key_campiagn", key); 
             });
             myDropzone.processQueue(); 
           });    
          },
  success: function (file, response) {
    var imgName = response;
    file.previewElement.classList.add("dz-success");
  },
  addfiles: function (file) {
    alert(file);
  },
  error: function (file, response) {
    file.previewElement.classList.add("dz-error");
  }
});
}
}

我想随文件一起提交 btn_id 值。我坚持如何将这些值一起提交到指定的 url。谁能帮我解决这个问题。

Answer 1

您可以在 init 函数中添加额外的值，然后再上传类似这样的内容

init: function() {
    this.on("sending", function(file, xhr, formData) {
       var value = $('form#upload1 #key').val();
       formData.append("key", value); // Append all the additional input data of your form here!
    });
}

Answer 2

根据文档：

Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.

来源：http://www.dropzonejs.com/#tips

所以可以这样做:

<form action="/" method="post" class="dropzone" id="my-awesome-dropzone">

     <input type="hidden" value="xxx" name="nom_prenom">

     <input type="hidden" value="yyy" name="product_name">

</form>

并在您的 PHP 文件中：

$nom_prenom = $_POST["nom_prenom"];
$product_name = $_POST["product_name"];

如何在 dropzone.js 中连同文件一起提交隐藏的输入字段

How to submit the hidden input fields also along with file in dropzone.js

javascript

php

jquery

dropzone.js