Question

在dropzone中，单击删除按钮后会引发removedfile事件，因此在删除图像之前不适合向用户显示确认消息。在删除图像之前，是否还有其他事件可以处理以向用户显示确认消息？

Answer 1

我知道这有点老问题，但我遇到了同样的问题，我想分享我发现的解决方案，如果有人需要的话。如果您在dropzone的选项中设置了dictRemoveFileConfirmation，它会在从队列中删除文件之前自动要求确认。

same issue here

Answer 2

这可以做到。这很笨拙，笨拙，并且涉及一些技巧。该API确实不是为此构建的。

如@dapidmini所述，您需要将dictRemoveFileConfirmation设置为非空值。这将启用您要查找的过程。继续阅读。

一旦分配了dictRemoveFileConfirmation，您将得到的是一个丑陋的JavaScript模式是/否对话框，该对话框由Dropzone.confirm(...)调用。 不好。

以下是removeFileEvent回调中来自Dropzone的源代码片段，该片段启动了该过程。我已经添加了我的评论...

// if dictRemoveFileConfirmation is set, it will invoke Dropzone.confirm
if (_this.options.dictRemoveFileConfirmation) {
    return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
        return _this.removeFile(file);
    });
} else {
    return _this.removeFile(file);
}

因此，黑客程序首先将Dropzone.confirm回调分配给您自己的回调。

例如

...
Dropzone.confirm = function(question, fnAccepted, fnRejected) {

}
...

如果您使用的是Bootstrap之类的东西，则可以重新分配上述方法，然后启动Bootstrap模式以提供不错的视觉效果。

$(document).ready(function() {

  // get the dropzone reference
  let dropzone = $(".dropzone")[0].dropzone;
  // enable the removal option
  dropzone.options.addRemoveLinks = true;
  // enable the confirmation
  dropzone.options.dictRemoveFileConfirmation = "Do you really really really want to remove this?";
  let removeCallback = undefined;
  // add some files to the dropzone
  let autoExec = { name: 'autoexec.bat', size: 99999 };
  let configSys = { name: 'config.sys', size: 99999};
  dropzone.emit("addedfile", autoExec);
  dropzone.emit("complete", autoExec);
  dropzone.emit("addedfile", configSys);  
  dropzone.emit("complete", configSys);
  
  // override the removal callback behavior
  Dropzone.confirm = function(question, fnAccepted, fnRejected) {
    // retain the callback to invoke to accept the removal
    removeCallback = fnAccepted;
    // launch your fancy bootstrap modal    
    $("#js-modal").modal('show');
  };
  // listen to the click of #js-remove.  remove the item by calling removeCallback and then close the modal
  $("#js-remove").click(function() {
    if (removeCallback) {
      removeCallback();
    }
    $("#js-modal").modal('hide');
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" rel="stylesheet" />
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>

<div class="dropzone" action="put-your-upload-url-here">
</div>

<div id="js-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to remove this?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="js-remove" type="button" class="btn btn-danger">Remove</button>
      </div>
    </div>
  </div>
</div>

如何在＆＃34; removedfile＆＃34;之前显示确认消息事件被提升，在dropzone？

2 个答案: