Dropzone.js CSS

Question

我有dropzone.js上傳的。 我將下一個代碼添加到我的JS中：

 thumbnail: function(file, dataUrl) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
    thumbnail.css('background', 'url('+dataUrl+')');
    var $fotoramaDiv = $('.fotorama').fotorama();
    var fotorama = $fotoramaDiv.data('fotorama');
    fotorama.push({img: dataUrl, thumb:dataUrl});   
 }

我只有一個問題-當我同時上傳多張圖片時，我只會得到最后一張圖片。

如果我刪除:last就是這種情況

我該如何解決？

解決了！

Answer 1

您的thumbnail選擇器$('.dropzone .dz-preview.dz-file-preview .dz-image:last'); 僅引用:last元素。 您應該刪除:last偽類。

Answer 2

形成

<form action="/file-upload"
  class="dropzone"
  id="my-awesome-dropzone"></form>

JS

 thumbnail: function("#my-awesome-dropzone") {
var thumbnail = $('.dropzone .dz-preview.dz-file-preview');
thumbnail.css('background', 'url('+dataUrl+')');
var $fotoramaDiv = $('.fotorama').fotorama();
var fotorama = $fotoramaDiv.data('fotorama');
fotorama.push({img: dataUrl, thumb:dataUrl});   

}

JSFIDDLE- https: //jsfiddle.net/gqbkhkxp/

Answer 3

我做了下一個：

thumbnail: function(file, dataUrl) {
        var i=sessionStorage.getItem('uploaded_pic');
        if(typeof(dataUrl) != "undefined" && dataUrl !== null) {
            i++;
            sessionStorage.setItem('uploaded_pic', i);
            var selector='.dropzone .dz-preview.dz-file-preview:nth-child('+i+') .dz-image';
            alert(selector);
            var thumbnail = $(selector);
            thumbnail.css('background', 'url('+dataUrl+')');
            var $fotoramaDiv = $('.fotorama').fotorama();
            var fotorama = $fotoramaDiv.data('fotorama');
            fotorama.push({img: dataUrl, thumb:dataUrl});
        }

當頁面加載時，我將始終重置會話存儲：

sessionStorage.setItem('uploaded_pic', 1);