Jquery Dropzone.js ändert die Breite der Miniaturansicht in 100% - Jquery, css, dropzone.js

Ich benutze Dropzone.Um Benutzern das Hochladen von Dateien auf den Server zu ermöglichen, können Sie entsprechend den Angaben die Breite der Miniaturansicht wie unten gezeigt ändern. Ich möchte jedoch die Breite auf 100% ändern, anstatt px zu verwenden.

Wenn ich das tue thumbnailWidth: 100% % char wird nicht erkannt.

    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>

Antworten:

Sie können keinen Prozentsatz für angeben thumbnailWidth und thumbnailHeight. Dropzone verwendet diese Werte zum Erstellen der Bildquelle, um sie als Vorschau anzuzeigen.

Sie können die Miniaturansicht jedoch auf der ursprünglichen Breite und Höhe belassen und diese Werte auf setzen null(Beachten Sie, dass dies bei Bildern mit hoher Auflösung zu Verzögerungen führen kann) und dann die <img> Breiten- und Höhenattribute, um das Bild in der gewünschten Größe anzuzeigen und das Bild anzupassen .dz-image Behälter mit 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");

Ich musste mit responsive Thumbnails arbeitenDropzone und dieser Beitrag hat sehr geholfen. Ich musste es auch ohne Jquery machen, also habe ich hier das, worauf ich gekommen bin.

Meine Dropzone-Init-Funktion sieht folgendermaßen aus:

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;";
});
})
}

Ich bin kein Javascript-Assistent, also gibt es wahrscheinlich einen effizienteren oder besseren Weg, dies zu tun.

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