jQuery Dropzone.js将缩略图宽度更改为100％ [英] Jquery Dropzone.js change thumbnail width to 100%

问题描述

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

I am using Dropzone.js to allow users to upload files to server, according to the specs you can change the thumbnail width as shown below, however I want to change the width to 100% instead of using px, Is this possible?

因为我愿意 thumbnailWidth: 100%不能识别％字符.

Because if I do thumbnailWidth: 100% it will not recognize % 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>

推荐答案

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

You cannot specify a percentage on thumbnailWidth and thumbnailHeight. Dropzone uses these values to create the image source to show it as a preview.

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

But you can leave the thumbnail at the original width and height, setting these values to null(Note that this can cause a bit of lag with high resolution images) and then use the <img> width and height attributes to display the image with the size you want and adjusting the .dz-image container with 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');

这篇关于jQuery Dropzone.js将缩略图宽度更改为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！