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

我使用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; } 
 

Answer 1

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

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

HTML：

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向导，所以可能有更高效或更好的方法来做到这一点。 请分享！

Answer 3

 var myDropZone = jQuery("#file128_dropzone").get(0).dropzone; myDropZone.options.thumbnailWidth = 250; myDropZone.options.thumbnailHeight = 250;