如何在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"
});

- mohamed youssouf

---

请详细说明您想要实现什么。您是否已经有示例代码？您是否已经查看了dropzone.js页面上的说明？http://www.dropzonejs.com/#Layout - dns_nx

检查我的问题更新 @dns_nx。 - mohamed youssouf

请看我的更新。我想我找到了错误。 - dns_nx

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({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"

- dns_nx

---

只是一个更正，你存储模板的 div 名称应该叫做 template-preview，但在 JavaScript 中你调用的是 previewTemplate：document.getElementById('preview-template').innerHTML。否则它可以工作。 - apereira

谢谢你的提示！将我的“di”放在“dropzone”之外，解决了问题！ - novecentonove

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

- Izle

Answer 3

值得一提的是，你现在可以使用模板字面量（用于多行字符串），因此`previewTemplate：'＆lt;your html＆gt;'`将起作用（使用反引号而不是我这里的单引号-只是不确定如何在此处转义！）

- Antony