刪除拇指的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