有没有办法使用默认的 Word 或 PDF images/icons 作为缩略图而不是通用的灰色背景？

Question

我想在 dropzone 文件预览中更改 word/pdf 文件的通用灰色背景。这是默认视图：

哪种方法最好？

Answer 1

我刚才找到了一个简单的方法来做到这一点。请注意，我是使用 jQuery，因此请确保也包含它。

首先，确保您的 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。如果要添加更多，只需使用此模板将更多 case 添加到 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] 形式的配置对象来配置 dropzone。其中一个选项是 accept 函数，该函数在接受文件之前触发。您可以使用此函数的第一个参数来监视传入的文件。

该参数具有诸如 type 之类的属性，可以告诉您 MIME 类型。一旦知道 mime 类型，就可以使用 CSS 更改元素的背景图像。我们的元素将始终是 $('.dropzone .dz-preview.dz-file-preview .dz-image:last') 因为我们总是希望以最新的 dropzone 文件为目标。只需将背景图像更改为适当的图标即可。例如，these 中的任何一个都适用于 PDF。

Answer 2

最后我是这样的：

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 像素才能适合默认预览模板。

这是结果：

Answer 3

使用这个：

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

或

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

Answer 4

我最终使用了@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");
                    }
                });
            }
        };

Answer 5

我认为，调整缩略图的大小很重要，所以你应该添加一行来调整大小。

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();
    }
};

有没有办法使用默认的 Word 或 PDF images/icons 作为缩略图而不是通用的灰色背景？

Is there a way to use default Word or PDF images/icons as the thumbnail rather than generic greyed out background?

javascript

css

dropzone.js

说明