dropzone.js：上传后显示复选标记和 x 图标答案

【问题标题】：dropzone.js: checkmark and x icons show after uploaddropzone.js：上传后显示复选标记和 x 图标
【发布时间】：2015-11-14 22:47:14
【问题描述】：

可能是 CSS 问题，但是当我以编程方式创建放置区框时，我会在完成后得到复选标记和 x 图标以及其他文本（参见链接图像）。

<div id="header-dropzone"></div>
$("#header-dropzone").dropzone({ url: "/header" })

如果我只是使用表单并使用 dropzone 初始化构建它，上传后它不会显示图标。

<form action="/header" class="dropzone"></form>

为什么 jquery 风格的不隐藏这些图标？他们使用相同的CSS。

【问题讨论】：

为什么你认为这是一个 CSS 问题，尤其是如果两者之间的 CSS 没有区别的话？
抱歉，我所说的 CSS 是指样式问题，例如没有应用正确的样式。
我也是这个意思。
表单变体的图标被隐藏了，但其他的没有。
您解决过这个问题吗？我正在经历同样的事情，这让我发疯了。

标签： javascript css dropzone.js

【解决方案1】：

我也遇到过这个问题。我的解决方案是在初始化后将 dropzone 类添加到元素中。这解决了 autoDiscover 问题，但保持 check/x 行为正常工作。

这是我的代码

$("#my-dropzone").dropzone({ /* options */ });
$("#my-dropzone").addClass("dropzone");

【讨论】：

【解决方案2】：

我刚刚提交了一个错误：https://gitlab.com/meno/dropzone/issues/57

同时，一种解决方法是手动修复此问题，将白色刻度变为绿色，白色十字不可见（反之亦然）：

theDropzone.on("success", function(file){   
  $(".dz-success-mark svg").css("background", "green");
  $(".dz-error-mark").css("display", "none");
});
theDropzone.on("error", function(file) {
  $(".dz-error-mark svg").css("background", "red");
  $(".dz-success-mark").css("display", "none");
});

【讨论】：

我知道这看起来很琐碎，但是添加它也使它看起来好多了：.css('border-radius', '30px')

【解决方案3】：

我遇到了这个问题，最终确定我的文档不包含库的 CSS（我忘记导入它）。将 *.css 导入到我的主 *.scss 文件中解决了这个问题。

（使用 .NET、node_modules (NPM) 和 *.scss）：

@import "~dropzone/dist/dropzone.css";

【讨论】：