如何在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

但我认为它应该与使用html()函数相同jQuery.我与你的代码区别开来的唯一一件事就是在之前将自动发现设置为false.也许这对你有帮助吗？

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

UPDATE

现在我想,我知道你的代码有什么问题.您已将模板的代码放在dropzonediv中.把它放在外面.然后它应该工作.

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