2017-01-16 25 views
0

我有一個由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}); 
} 

我只有一個問題 - 當我上傳在同一時間我只得到了最後一張照片多張圖片。

image

情況是這樣的,如果我刪除:last image2

我該如何解決這個問題?

已解決!

+0

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

+0

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

+0

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

回答

0

我做了下:

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

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

+0

不工作,我添加了新的圖像! – Gari

0

形式

<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/

+0

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