删除拇指的dropzone并隐藏包含dropzone的div

Question

我正在使用dropzone.js文件上传器。 一切正常，但上传后我想清除拇指的dropzone并隐藏包含dropzone的div。 那是事情出错的地方。 尽管我努力清除它们，但拇指仍然停留在原位。

我已经尝试了Dropzone.js网站中的所有建议，但似乎没有任何效果。 我可以使用它们的示例获取单独的删除按钮，但不能使用主删除按钮。 是的，我也尝试过FAQ示例。 我直接从教程中获取了代码，只是将引用添加到了库中，它仍然不会消除麻烦。

<!doctype html>
<html>
<head>
<link href="style/dropzone.css?v=1.2" type="text/css" rel="stylesheet" />
<script src="js/dropzone.min.js"></script>
<script language="javascript">
function ClearDZ() {
            myDropzone.removeAllFiles();
            document.getElementById("container").style.display = "none";
  }
</script>
<meta charset="UTF-8">
</head>

<body>
<div id=container>
<form id="myDropzone" action="/target-url" class="dropzone"></form>
<button onclick="ClearDZ()">Clear All</button>
<div>
</body>
</html>

Answer 1

我想知道您的dropzone配置在哪里以及如何配置它。 如果您的代码与显示的一样简单，则应配置dropzone并侦听事件。 尝试这个：

<script>
//I'm assuming your form is called myDropzone
Dropzone.options.myDropzone = {
  //your configuration goes here

  init: function() {
    var myDropzone = this;

    //You can do this
    $('#your_button_id').on("click", function(e) {
      myDropzone.removeAllFiles(true);
    });

    //But you should do this
    this.on("success", function(file, response) {
      myDropzone.removeAllFiles(true);
    });

    //and this to handle any error
    this.on("error", function(file, response) {
      //handle errors here
    });
  }
}
</script>

您可以在http://www.dropzonejs.com/#toc_8上获得有关侦听事件的更多信息，并在http://www.dropzonejs.com/#toc_6上获得有关Dropzone的配置的更多信息。

希望对你有帮助：）

Answer 2

在您的库dropzone dropzone.js上尝试一下； 但将时间设置为自动关闭2500

success: function(file) {
    if (file.previewElement) {
      return file.previewElement.classList.add("dz-success"),
      $(function(){
        setTimeout(function(){
          $('.dz-success').fadeOut('slow');
        },2500);
      });
    }
  },

删除拇指的dropzone并隐藏包含dropzone的div

问题描述

2 个解决方案

解决方案1
6 已采纳 2014-05-20 14:31:32

解决方案2
0 2017-06-05 02:51:06

删除拇指的dropzone并隐藏包含dropzone的div

问题描述

2 个解决方案

解决方案1 6 已采纳 2014-05-20 14:31:32

解决方案2 0 2017-06-05 02:51:06

解决方案1
6 已采纳 2014-05-20 14:31:32

解决方案2
0 2017-06-05 02:51:06