web-dev-qa-db-ja.com

dropzonejsでカスタムプレビューテンプレートを作成する方法

カスタムプレビューテンプレートの作り方を知りたい。ドキュメントはすべてをうまく説明していません、そして私は何も見つからなかったというチュートリアルを検索しました。

更新

私の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"
});
javascriptdropzone.js
3
mohamed youssouf

私にとってそれは

_previewTemplate: document.getElementById('preview-template').innerHTML
_

しかし、jQueryでhtml()関数を使用するのと同じである必要があると思います。私があなたのコードと区別して行った唯一のことは、以前は自動検出を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({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"
_
5
dns_nx

Dropzone.jsバージョン5.5.0の場合、IDがtplのdivを作成し、その中にテンプレートを配置するだけです。ドロップゾーンを定義するときは、次のように設定してください

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