Jquery Dropzone.js змінить ширину ескізів до 100% - jquery, css, dropzone.js

Я використовую 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 використовує ці значення для створення джерела зображення, щоб показати його як попередній перегляд.

Але ви можете залишити ескіз за оригінальною шириною та висотою, встановивши ці значення до null(Зверніть увагу, що це може спричинити деякий відставання з зображеннями з високою роздільною здатністю), а потім використовуйте <img> атрибути ширини та висоти, щоб відобразити зображення з потрібним розміром та налаштувати його .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");

Мені потрібно було виконати чутливі ескізиКрапля зона і цей пост допомогли багато чого. Я також мав це робити без жарію, тому ось що я придумав. Фігурно поділений, якщо це допомагає комусь іншому.

Моя функція dropzon 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, тому, можливо, це більш ефективний або кращий спосіб зробити це. Будь ласка, поділіться!

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