Dropzone JS Vorschau Element Option

Question

Ich habe zwei Dropzones

JS-Code

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>

initialisieren, wie ich previewsContainer.js-previews-1 für ersten Sprungplatz und .js-previews-2 für die zweiten einstellen kann?

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>