如何在dropzone.js

时间:2015-09-18 07:59:10

标签: javascript php jquery dropzone.js

我是这个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。任何人都可以帮我解决这个问题。

2 个答案:

答案 0 :(得分:3)

您可以在上传类似

之类的内容之前在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!
    });
}

答案 1 :(得分:1)

根据文件:

  

Dropzone将提交您在dropzone表单中的任何隐藏字段。   因此,这是提交其他数据的简便方法。你也可以使用   params选项。

来源: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"];