如何在 dropzone js 中制作自定義預覽模板

Question

我想知道如何制作自定義預覽模板。 文檔並沒有很好地解釋一切，我搜索了關於我沒有找到任何東西的教程。

更新

---

我的html

<div id="dropzone">
  <div id="template-preview">
    <img src="assets/images/icons/plus-icon-white.png" alt="" />
    <span>Choose or drop  file from your computer</span>
    <div class="dz-preview dz-file-preview well" id="dz-preview-template">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span></span></div>
      <div class="dz-error-mark"><span></span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
  </div>
</div>

我的js

var drop = $('#dz-preview-template').html();
$('#dropzone').dropzone({
   url: "/upload",
   maxFilesize: 100,
   paramName: "uploadfile",
   maxThumbnailFilesize: 5,
   previewTemplate: drop,
   previewsContainer: "#template-preview"
});

Answer 1

對我來說，它與

previewTemplate: document.getElementById('preview-template').innerHTML

但我認為它應該與在jQuery使用html()函數相同。 我所做的與您的代碼不同的唯一一件事就是之前將 autodiscover 設置為 false。 也許這對你也有幫助？

Dropzone.autoDiscover = false;
var uploadLogo = new Dropzone("div#uploadLogo", {
                                url: "../uploads/logo"
                                , method: "post"
                                ,...
                                ,previewTemplate: document.getElementById('preview-template').innerHTML
                                ,...
});

更新

現在我想，我知道你的代碼有什么問題。 您已將模板代碼放在dropzone div 中。 把它放在外面。 那么它應該工作。

<div id="dropzone"></div>
<div id="template-preview">
        <div class="dz-preview dz-file-preview well" id="dz-preview-template">
                <div class="dz-details">
                        <div class="dz-filename"><span data-dz-name></span></div>
                        <div class="dz-size" data-dz-size></div>
                </div>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div class="dz-success-mark"><span></span></div>
                <div class="dz-error-mark"><span></span></div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
        </div>
</div>

為 dropzone 區域顯示的文本，您可以在初始化 dropzone 期間設置：

$('#dropzone').dropzone({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"

Answer 2

對於 dropzone.js 5.5.0版，您只需創建一個 id 為tpl的 div，然后將模板放入其中。 當您定義 dropzone 時，只需將其設置為：

var myDropzone = new Dropzone(
    "div#div_submit",
    {
        url: "mypage.aspx",
        previewTemplate : document.querySelector('#tpl').innerHTML
    }
);