Question

我使用dropzone来设计一点形状，目前只用于上传文件。现在我需要为每个文件添加一些额外的数据。我在这里看到了几个类似的问题，但我无法弄明白。所以我想要做的是当我将文件放入dropzone时出现一个模态窗口，其中包含从数据库中获取的附加数据的选项。所以我在发送之前需要事件（发送）来暂停上传，然后输入数据然后继续上传。我卡在这里 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');              
        });

现在它的显示但是当我点击按钮时没有发生。如何在按钮单击时启动ProccessQueue？

Answer 1

您可以添加autoProcessQueue调用以开始上传，如下所示：

myDropzone.processQueue()

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

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

1 个答案: