时间戳

首页 > 解决方案 > DropZone JS成功后更改默认预览图像

dropzone - DropZone JS成功后更改默认预览图像

问题描述

所以我在更改文档上传成功后显示的默认图像时遇到问题。

我的 DropZone 定义有以下内容；

$(document).ready(function () {
            $(".dropzone").dropzone({
                renameFilename: function (filename) {
                    return 'ps' + $('#txtID').val() + '_' + filename;
                },
                success: function (file, response) {
                    var ext = getFileExt(file.name);
                    var newImagePath = file.name;

                    /* Check for extension */
                    if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif') {
                        if (ext == 'pdf') {
                            newImagePath = "/images/icon_pdf128.png";
                        }else{
                            newImagePath = "/images/icon_genericfile128.png";
                        }
                    }

                    this.createThumbnailFromUrl(file, newImagePath);
                },
                url: 'aPageHere',
                method: 'post',
                dictDefaultMessage: 'Drop files here or click to upload<br>(max 5MB)',
                thumbnailWidth: 60,
                thumbnailHeight: 60,
                maxFilesize: 5,
                previewsContainer: ".dropzone-previews",
                previewTemplate: document.querySelector('#previews').innerHTML

            });
        });

我遇到问题的区域是 Success 功能，如果它是图像，那么很好，DropZone 显示图像的预览，但如果需要，我正在尝试将图像更改为 PDF 图片或通用图片

欢迎大家提出意见

谢谢

马特

标签： dropzone

解决方案

我假设图像将被放置在预览中。
您可以在预览中执行查询选择器，如下所示：

success: function (file, response) {

      //Select the preview element
      var previewImg = file.previewElement.querySelector('img');

      var ext = getFileExt(file.name);
      var newImagePath = file.name;

      /* Check for extension */
      if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif') {
          if (ext == 'pdf') {
              newImagePath = "/images/icon_pdf128.png";
          }else{
              newImagePath = "/images/icon_genericfile128.png";
          }
          previewImg.src = newImagePath;
      }

  }

推荐阅读