dropzone.js：上傳后顯示復選標記和x圖標

Question

可能是CSS問題，但是當我以編程方式創建一個dropzone框時，我會在完成后獲得復選標記和x圖標以及其他文本（請參閱鏈接圖像）。

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

如果我只是使用表單並使用dropzone初始化來構建它，它不會在上傳后顯示圖標。

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

為什么jquery風格的人不會隱藏這些圖標？ 他們使用相同的CSS。

Answer 1

我也遇到過這個問題。 我的解決方案是在初始化后將dropzone類添加到元素中。 這解決了autoDiscover問題，但保持check / x行為正常。

這是我的代碼

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

Answer 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");
});

Answer 3

我遇到了這個問題並最終確定我的文檔沒有包含庫的CSS（我忘了導入它）。 將* .css導入到我的主* .scss文件中解決了該問題。

（使用.NET，node_modules（NPM）和* .scss）：

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