javascript 删除拇指放置区并隐藏包含放置区的 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23744789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:29:32  来源:igfitidea点击:

Remove dropzone of thumbs and hide the div containing dropzone

javascriptshow-hidedropzone.js

提问by user3200528

I'm using the dropzone.jsfile uploader. Everything works fine but once I've uploaded I want to clear the dropzone of thumbs and hide the div containing dropzone. That's where things go awry. The thumbs still stay in place despite my efforts to clear them.

我正在使用dropzone.js文件上传器。一切正常,但是一旦我上传,我想清除拇指的放置区并隐藏包含放置区的 div。这就是事情出错的地方。尽管我努力清除它们,但拇指仍然留在原地。

I've tried all the suggestions in the Dropzone.js site but nothing seems to work. I can get separate remove buttons to work using their example but can't have a master remove button. And yes, I've tried the FAQ example as well. I took the code straight from the tutorial and just added the references to the libraries and it still wouldn't remove the thumbs.

我已经尝试了 Dropzone.js 站点中的所有建议,但似乎没有任何效果。我可以使用他们的示例获得单独的删除按钮,但不能有一个主删除按钮。是的,我也尝试过常见问题解答示例。我直接从教程中获取了代码,只是添加了对库的引用,但它仍然不会删除拇指。

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

回答by amandasantanati

I wonder where are your dropzone configuration and how did you configure it. If your code is as plain as you showed, you should configure your dropzone and listen to events. Try this:

我想知道您的 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>

You can have more information about listen to events at http://www.dropzonejs.com/#toc_8and about configuration of Dropzone at http://www.dropzonejs.com/#toc_6

你可以有更多的信息,关于监听事件在http://www.dropzonejs.com/#toc_8约在悬浮窗的配置http://www.dropzonejs.com/#toc_6

I hope you find it useful :)

希望对你有帮助 :)

回答by heriipurnama

try this on your library dropzone dropzone.js; but set time out to auto close 2500

在你的库 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);
      });
    }
  },