Jquery Dropzone.js将缩略图宽度更改为100%

Question

我使用Dropzone.js允许用户将文件上传到服务器,根据规格您可以更改缩略图宽度,如下所示,但是我想将宽度更改为100%而不是使用px,这可能吗？

因为如果我这样做 thumbnailWidth: 100%将无法识别%char.

    dzImageOptions = Dropzone.options.myDropzone = {
        thumbnailWidth: 314, //I want to change width to 100% instead
        thumbnailHeight: 314,
        init: function (file) {

        }
}
    //Also have to change css or thumbnail won't resize properly
    .dropzone.song-image .dz-preview .dz-image {
    border-radius: 1px;
    width: 314px;
    height: 314px;
}

<div class="dropzone song-image"></div>

Answer 1

您无法在thumbnailWidth和上指定百分比thumbnailHeight.Dropzone使用这些值创建图像源以将其显示为预览.

但是您可以将缩略图保留为原始宽度和高度,将这些值设置为null(请注意,这可能会导致高分辨率图像出现滞后),然后使用<img>width和height属性显示具有所需大小的图像..dz-image用css 调整容器.

HTML:

<div class="dropzone" id="myDropzone"></div>

JS:

Dropzone.autoDiscover = false;

Dropzone.options.myDropzone = {
    url: "yourUrl",
    thumbnailWidth: null,
    thumbnailHeight: null,
    init: function() {
        this.on("thumbnail", function(file, dataUrl) {
            $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
        }),
        this.on("success", function(file) {
            $('.dz-image').css({"width":"100%", "height":"auto"});
        })
    }
};

var myDropzone = new Dropzone('div#myDropzone');

Answer 2

我需要使用 dropzone 完成响应式缩略图，这篇文章帮助很大。我还需要在没有 jquery 的情况下做到这一点，所以这就是我想出的。想如果它对其他人有帮助，我会分享。

我的 dropzone init 函数如下所示：

init: function () {
    this.on('thumbnail', function(file, dataUrl) {
        var thumbs = document.querySelectorAll('.dz-image');
        [].forEach.call(thumbs, function (thumb) {
            var img = thumb.querySelector('img');
            if (img) {
                img.setAttribute('width', '100%');
                img.setAttribute('height', '100%');
            }
        });
    }),
    this.on('success', function(file) {
        var thumbs = document.querySelectorAll('.dz-image');
        [].forEach.call(thumbs, function (thumb) {
            thumb.style = 'width: 100%; height: auto;';
        });
    })
}

我不是一个 javascript 向导，所以可能有更有效或更好的方法来做到这一点。请分享！