Dropzone.js CSS

我有一個由dropzone.js上傳。我加入了一個代碼到我的JS：Dropzone.js CSS

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

我該如何解決這個問題？

已解決！

來源

2017-01-16 Gari

你應該概率裏面'$ fotoramaDiv'選擇一些應用圖像，使用'.dz圖像：last'意志只設置最後一個圖像（並刪除'：last'將每個元素設置爲相同的圖像）。你能告訴我們存儲在'$ fotoramaDiv'中的元素嗎？ – DBS

fotorama div不是重要的，還有其他插件'fotorama.io'，這個工作正常！ – Gari

那麼，你怎麼知道你應該將圖像添加到哪個元素？另外，一個小的工作示例會非常有幫助。 – DBS

我做了下：

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

來源

2017-01-17 05:22:58 Gari

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

來源

2017-01-16 13:41:49 Bellu

不工作，我添加了新的圖像！ – Gari

形式

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

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/

來源

2017-01-16 14:01:02

什麼都沒有。比以前更糟糕。 – Gari

回答

相關問題