Question

我想知道如何制作自定义预览模板。文档没有很好地解释所有内容，我搜索了关于我没有找到任何内容的教程。

更新

我的HTML

func2

我的js

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

Answer 1

对我而言，它适用于

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

但我认为它应该与在html()中使用jQuery功能相同。我与你的代码区别开来的唯一一件事就是在之前将自动发现设置为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 });

如何在dropzone js中制作自定义预览模板

2 个答案: