文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在下拉区域js中生成自定义预览模板

问如何在下拉区域js中生成自定义预览模板
EN

Stack Overflow用户

提问于 2016-11-21 11:48:23

回答 2查看 43.1K关注 0票数 6

我想知道如何制作自定义预览模板。这些文档并不能很好地解释所有的事情，我搜索了关于我没有发现任何东西的教程。

更新

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

dropzone.js

javascript

回答 2

Stack Overflow用户

发布于 2016-11-21 13:21:50

对我来说它起了作用

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

票数 14

Stack Overflow用户

发布于 2018-10-19 03:27:20

对于dropzone.js版本5.5.0，只需使用id tpl创建一个div，然后将模板放入其中。当您定义下拉区域时，只需按如下方式设置：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40719449

复制

相似问题

问如何在下拉区域js中生成自定义预览模板
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在下拉区域js中生成自定义预览模板EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在下拉区域js中生成自定义预览模板
EN