Question

我有两个dropzones

JS代码初始化

Dropzone.autoDiscover = false;
$(".js-dropzone").dropzone({
  url: 'upload_files.php',
  addRemoveLinks: true,
  previewTemplate: $('.form_dropzone_preview').html()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<!-- first -->

<div class="form_dropzone js-dropzone></div>
    <div class=" dropzone-previews js-previews-1 "></div>

    <!-- second -->
    <div class="form_dropzone js-dropzone></div>
<div class="dropzone-previews js-previews-2"></div>

如何为第一个dropzone设置previewsContainer .js-previews-1，为第二个设置.js-previews-2？

Answer 1

JS

function initDropzone(id, previewsContainer) {
    new Dropzone(
    id, //id of drop zone element
    {
        url: 'upload_files.php',
        previewTemplate: $('.form_dropzone_preview').html(),
        previewsContainer: previewsContainer
        // other options 
     }
}

(function($) {
    "use strict";

    //  Dropzone
    Dropzone.autoDiscover = false;
    for ( var i = 1; i <= 2; i++){
        initDropzone('#dropzone_'+i,'#dropzone_previews_'+i);
    }

}(jQuery));

HTML

first
<div class="form_dropzone" id="dropzone_1"></div>
<div class="dropzone-previews" id="dropzone_previews_1"></div>

second
<div class="form_dropzone" id="dropzone_2"></div>
<div class="dropzone-previews" id="dropzone_previews_2"></div>

dropzone JS预览元素选项

1 个答案: