Tengo una plantilla de maquillaje para colocar una imagen en miniatura por orden de elemento y/o por elemento en el que se hace clic.
La plantilla para subir imágenes es así:
$(document).ready(function(e) { $('.upload-field-multiple').each(function(e) { var id = $(this).attr('id'); var previewTemplate = document .querySelector('#tpl') .innerHTML; var default_option = { url: '/upload', method: "post", autoProcessQueue: false, uploadMultiple: true, maxFiles: 5, parallelUploads: 100, thumbnailWidth: 80, thumbnailHeight: 80, timeout: 0, paramName: id, previewsContainer: '.row-thumbnail', previewTemplate: previewTemplate, } var myUploadObj = new Dropzone('#' + id, default_option); }) }) .upload-field-multiple { width: 333px; height: 188px; border: 1px solid black; } .row-thumbnail { display: flex; flex-wrap: wrap; margin-top: 7px; } .row-thumbnail .thumbnail-item { width: 80px; height: 48px; border: 1px solid black; } .row-thumbnail .thumbnail-item:not(:last-child) { margin-right: 3px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"> </script> <div id="tpl" style="display: none;"> <div class="dz-preview dz-file-preview thumbnail-item"> <div class="dz-image"><img data-dz-thumbnail /></div> </div> </div> <div class="upload-field-multiple dz-message form-controls" id="photo_upload"></div> <div class="row-thumbnail dropzone-previews"> <div class="thumbnail-item"></div> <div class="thumbnail-item"></div> <div class="thumbnail-item"></div> <div class="thumbnail-item"></div> </div>Las casillas representan el número de archivos que el usuario puede cargar. Quiero que la miniatura se muestre en cada uno de los cuadros en los que se hace clic para buscar archivos.
Sin embargo, mi problema ahora es que solo puedo configurar el contenido de la plantilla de vista previa como id #tpl y agregarlo a la clase de contenedor de vista previa .row-thumbnail mientras dejo <div class="thumbnail-item"></div> y .upload-field-multiple elementos vacíos.
Me pregunto si puedo cambiar las opciones de dropzone sobre la marcha como la condición que deseaba. Por favor amablemente ayuda, gracias.