拖放区 JS 预览元素选项

Question

我有两个放置区

要初始化的 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>

如何为第一个放置区设置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>