Question

我正在使用dropzone.js文件上传器。一切正常，但一旦我上传，我想清除拇指的下拉区并隐藏包含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 个答案: