web-dev-qa-db-ja.com

一般的な灰色の背景ではなく、デフォルトのWordまたはPDF画像/アイコンをサムネイルとして使用する方法はありますか？

Dropzoneファイルのプレビューで、Word/pdfファイルの一般的なグレー表示の背景を変更したい。これはデフォルトのビューです：

enter image description here

それを行う最良の方法はどれですか？

javascriptcssdropzone.js
16
Gabriel C

これが最終的に私がやった方法です：

myAwesomeDropzone.on('addedfile', function(file) {

    var ext = file.name.split('.').pop();

    if (ext == "pdf") {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
    } else if (ext.indexOf("doc") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/Word.png");
    } else if (ext.indexOf("xls") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
    }
});

デフォルトのプレビューテンプレートに合わせるには、画像を120x120ピクセルにする必要があります。

これが結果です：

enter image description here

17
Gabriel C

今、これを行う簡単な方法を見つけました。私はjQueryを使用してamであることに注意してください。そのため、それも必ず含めてください。

まず、Dropzoneにidがあることを確認してください。鉱山はmyAwesomeDropzoneです：

_<form id="myAwesomeDropzone" action="/upload-target" class="dropzone"></form>
_

次に、含めたいファイルタイプごとに画像アイコンを作成します。 PDFとWordのアイコンを見つけ、imgというディレクトリに置きました。

次に、次のJavaScriptを含めます。

_// Make sure to use YOUR Dropzone's ID below...
Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');

    switch (file.type) {
      case 'application/pdf':
        thumbnail.css('background', 'url(img/pdf.png');
        break;
      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        thumbnail.css('background', 'url(img/doc.png');
        break;
    }

    done();
  },
};
_

上記のコードはPDFおよびWordで機能します。さらに追加したい場合は、このテンプレートを使用してcasesをswitchステートメントに追加します。

_case '[mime type]':
  thumbnail.css('background', 'url(img/[icon filename]');
  break;
_

accept関数にconsole.log(file.type);を追加してMIMEタイプを検索し、テストファイルをドロップして、ブラウザーのコンソールを確認できることに注意してください。

説明

Dropzoneを使用すると、_Dropzone.options.[your dropzone's id]_の形式の構成オブジェクトでドロップゾーンを構成できます。オプションの1つは、ファイルが受け入れられる前に起動されるaccept関数です。この関数の最初のパラメーターを使用して、着信ファイルをスパイできます。

そのパラメーターには、MIMEタイプを通知できるtypeなどのプロパティがあります。 MIMEタイプがわかったら、CSSを使用して要素の背景画像を変更できます。常に最新のドロップゾーンファイルを対象にするため、要素は常に$('.dropzone .dz-preview.dz-file-preview .dz-image:last')になります。背景画像を適切なアイコンに変更するだけです。たとえば、PDFでは these のいずれでも機能します。

16
Travis

これを使って：

this.emit("thumbnail", file, "/WebResources/cre_pdf_icon");

または

myDropzone.emit("thumbnail", file, "/WebResources/cre_pdf_icon");
1
mkk

サムネイル画像のサイズを変更することが重要であるため、サイズを変更する行を追加する必要があります。

Dropzone.options.myAwesomeDropzoneUpload = {
    accept: function(file, done) {

        switch (file.type) {
          case 'application/pdf':
              this.emit("thumbnail", file, "/static/img/pdf.png");            
              break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
              this.emit("thumbnail", file, "/static/img/Word.png"); 
              break;
        }
        file.previewTemplate.querySelector(".dz-image img").style.width="120px";

        done();
    }
};
0
Faruk ÜNAL

@Gabrielの回答のバリエーションを使用してしまいました

Dropzone.options.myAwesomeDropzone= {
            init: function () {
                this.on("addedfile", function (data) {
                    console.log(data);

                    var ext = data.name.split('.').pop();

                    if (ext == "pdf") {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
                    } else if (ext.indexOf("doc") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Word.png");
                    } else if (ext.indexOf("xls") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
                    } else if (ext.indexOf("xlsx") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
                    }
                });
            }
        };
0
Liknes