Dropzone.js CSS答案

【问题标题】：Dropzone.js CSSDropzone.js CSS
【发布时间】：2017-05-31 08:43:03
【问题描述】：

我有一个由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，就会出现这种情况

我该如何解决这个问题？

解决了！

【问题讨论】：

你应该在$fotoramaDiv 中选择一些东西来应用图像，使用.dz-image:last 只会设置最后一个图像（删除:last 会将每个元素设置为相同的图像）。你能告诉我们存储在$fotoramaDiv中的元素吗？
fotorama div 不重要，还有其他插件fotorama.io 并且工作正常！
那么，您如何知道应该将图像添加到哪个元素？此外，一个小的工作示例会很有帮助。
总是最后一个，如果我没记错的话，parralel upload:1的话dropzone会一个一个上传。
你所拥有的最后一个元素可以正常工作，但显然它是在添加背景之前创建所有这些元素。

标签： javascript css dropzone.js

【解决方案1】：

您的 thumbnail 选择器 $('.dropzone .dz-preview.dz-file-preview .dz-image:last'); 仅引用到 :last 元素。您应该删除 :last 伪类。

【讨论】：

【解决方案2】：

表格

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

【讨论】：

没什么。比以前更糟糕。

【解决方案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);

【讨论】：