Есть ли способ использовать по умолчанию Word или PDF-изображения/значки в виде миниатюры, а не общего зеленого цвета?

Ответ 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 пикселей, чтобы соответствовать шаблону предварительного просмотра по умолчанию.

Это результат:

Ответ 2

Я нашел простой способ сделать это сейчас. Обратите внимание: я am, используя jQuery, поэтому обязательно включите это.

Прежде всего, убедитесь, что у вашей Dropzone есть id. Мина myAwesomeDropzone:

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

Во-вторых, создайте значки изображений для каждого типа файла, который вы хотите включить. Я нашел значки для PDF и Word и поместил их в каталог под названием img.

Затем включите следующий JavaScript:

// Make sure to use YOUR Dropzone 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;

Обратите внимание, что вы можете найти тип mime, добавив console.log(file.type); в функцию accept, затем отбросьте тестовый файл и проверьте консоль своего браузера.

Описание

Dropzone позволяет вам настроить dropzone с помощью объекта конфигурации в форме Dropzone.options.[your dropzone id]. Одним из вариантов является функция accept, которая запускается до того, как файл будет принят. Вы можете использовать этот первый параметр функции, чтобы шпионить за входящим файлом.

Этот параметр имеет такие свойства, как type, который может указать вам тип mime. Как только вы узнаете тип mime, вы можете изменить фоновое изображение элемента с помощью CSS. Наш элемент всегда будет $('.dropzone .dz-preview.dz-file-preview .dz-image:last'), так как мы всегда хотим настроить таргетинг на последний файл dropzone. Просто измените фоновое изображение на соответствующий значок. Например, любой из этих будет работать для PDF.

Ответ 3

Используйте это:

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

или

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

Ответ 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");
                    }
                });
            }
        };