如何在removedfile"前显示确认信息事件在dropzone中引发

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

这里也是一样

这可以做到。它是笨拙的，笨拙的，涉及到一点hack。这个API真的不是为它而构建的。

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

一旦你分配dictRemoveFileConfirmation，所有你要得到的是一个丑陋的javascript模态是/否对话框，这是由Dropzone.confirm(...)调用。不好。

下面是来自Dropzone的源代码片段，它从removeFileEvent回调开始这个过程。我已经添加了我的评论…

// 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>

选项1:您可以使用dictremovefilconfirm选项。请注意，这将使用难看的JS警告对话框。

new Dropzone("#dropzone_container", {
        autoDiscover: false,
        uploadMultiple: true,
        parallelUploads: 1,
        maxFiles: 10,
        addRemoveLinks: true,
        //The addRemoveLinks option will use the following option for wording of the Confirmation message
        dictRemoveFileConfirmation:  "Are you sure?"
});

选项2:如果您覆盖removedFile函数，您可以添加自定义脚本来确认删除，因为文件预览不会自动删除。

new Dropzone("#dropzone_container", {
        autoDiscover: false,
        uploadMultiple: true,
        parallelUploads: 1,
        maxFiles: 10,
        addRemoveLinks: true,
        removedfile: function (file) {
               //This is where you can add custom script to confirm deletion; 
               //You could use Sweetalert 2 or whatever you prefer than the ugly JS ugly alert box
               //This will manually removed the file
               file.previewElement.remove();
        }
);

进一步阅读，DropzoneJS文档点击这里。