Question

我正在使用Dropzone.js进行图片上传。降低功能。现在我的问题是如何在图像上传图像周围添加自定义Wrapper / Coantainer DIV。

enter image description here

就像这样：

<html lang="en">
<head>
<body>
    <div id="some-dropzone" class="dropzone dz-clickable dz-square dz-started">
        <div class="dz-default dz-message" data-dz-message="">
        <div id="my-custom-div"> <! -- My custom wrapper div around preview div -->
            <div class="dz-preview dz-processing dz-image-preview dz-success">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
            <div class="dz-preview dz-processing dz-success dz-image-preview">
        </div>
    </div>
</body>
</html>

我想用单行滚动条显示所有图像。所以你有任何想法如何在Dropzone.js或任何其他方式。

enter image description here

感谢。

Answer 1

更新：http://jsfiddle.net/lotusgodkk/1cy803ar/4/

JS：

$('#some-dropzone').append("<div id='my-custom-div'></div>");
$('#some-dropzone #my-custom-div').append($('#some-dropzone .dz-preview'));

Answer 2

使用dropzone初始化代码尝试以下解决方案。

this.on("success", function(file, serverFileName) {

     if (!$('#preview-wrapper').length){
         $(".dz-preview").wrapAll("<div id='preview-wrapper'></div>");
     }

});

如何在Dropzone.js中的图像预览周围添加自定义包装div？

2 个答案: