Dropzone 在发送时显示模式并向 POST 添加其他数据

Question

我使用 dropzone 为我的表单设置样式，目前该表单仅用于上传文件。现在我需要为每个文件添加一些额外的数据。我在这里看到了几个类似的问题，但我无法弄清楚。所以我想要做的是，当我将一个文件放入 dropzone 以显示一个模式窗口，其中包含从数据库中获取的附加数据的选择选项。所以我需要发送前的事件（sending）暂停上传，然后输入数据，然后继续上传。我卡在这里。 html:

<div class="tab-pane fade active in" id="uploadtab">

<form id="myDropzone" action="/routes/upload" class="dropzone" enctype="multipart/form-data"></form>  

</div>

<!-- Modal -->
    <div class="modal hide fade in" id="myModal" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
          <a href="#" class="btn">Close</a>
          <a href="#" class="btn btn-primary" id="savebtn">Save changes</a>
    </div>
    </div>

    <div id="response"> 
     </div>

Javascript：

<script type="text/javascript">
Dropzone.options.myDropzone = {
    autoProcessQueue: true,
    init: function() {
        var submitButton = document.querySelector("#savebtn");
        //var myDropzone = this; //closure
        submitButton.addEventListener("click", function() {

            this.processQueue();
        });

        this.on("sending", function(test) {
            $('#myModal').modal('show');
        });

        var submitButton = document.querySelector("#submit-all");
        this.on("success", function(file, response) {
            $("#response").append(response);

        });
    }
};
 </script>

我将文件传递给一个名为upload 的zend 操作，然后我用文件中的信息做了几件事，但这并不重要。 现在问题真的是我不知道如何暂停上传。如果我将“autoProcessQueue：true”设置为 false，则事件不会发生任何事情。

编辑 1： 好的，原来我需要使用另一个事件来显示模态表单。

            this.on("addedfile", function(file) {
            $('#myModal').modal('show');              
        });

现在它正在显示，但是当我单击按钮时没有任何反应。如何在按钮单击时启动 ProcessQueue？

Answer 1

您可以像这样添加 autoProcessQueue 调用来开始上传：

myDropzone.processQueue()

要关闭自动上传，您可以将 autoProcessQueue 设置更改为 false。