我使用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>
解决方法
您无法在thumbnailWidth和thumbnailHeight上指定百分比. Dropzone使用这些值创建图像源以将其显示为预览.
但是您可以将缩略图保留为原始宽度和高度,将这些值设置为空(请注意,这可能会导致高分辨率图像出现滞后),然后使用< img> width和height属性,用于显示所需大小的图像,并使用css调整.dz-image容器.
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');
