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

Question

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

这是最好的方法吗？

Answer 1

这是我最终做到的方式:

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 2

我刚刚发现了一种简单的方法.请注意,我正在使用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语句添加更多s :

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

请注意,您可以通过添加找到MIME类型console.log(file.type);的accept功能,然后删除测试文件,并检查浏览器的控制台.

说明

Dropzone允许您使用形式的配置对象配置dropzone Dropzone.options.[your dropzone's id].其中一个选项是accept在接受文件之前触发的函数.您可以使用此函数的第一个参数来监视传入的文件.

该参数具有type可以告诉您mime类型的属性.一旦知道了mime类型,就可以使用CSS更改元素的背景图像.我们的元素将永远是$('.dropzone .dz-preview.dz-file-preview .dz-image:last')因为我们总是希望定位最新的dropzone文件.只需将背景图像更改为适当的图标即可.例如,任何的这些会为PDF工作.