Bilder in Platzhalter-Dropzone hochladen?

Question

ich Sprungplatz bin mit meinen Bildern, wie unten laden:

 var myDropzone = new Dropzone(document.getElementById('product-image-drpzone'), { 
     uploadMultiple: false, 
     acceptedFiles: '.jpg,.png,.jpeg,.gif', 
     parallelUploads: 4, 
     maxFiles: 4, 
     url: Urls.products.image_upload 
    }); 

    myDropzone.on('sending', function (file, xhr, formData) { 
     formData.append('cloud_name', ''); 
     formData.append('api_key',); 
     formData.append('api_secret', ''); 
     formData.append('timestamp', Date.now()/1000 | 0); 
     formData.append('upload_preset', 'gi7szvel'); 
    }); 
    myDropzone.on('success', function (file, response) { 
     _this.imagesArr.push(response.public_id); 
     console.log('Success! Cloudinary public ID is', response.public_id); 
    }); 

Meine Seite

HTML:

<div class="col-sm-12"> 
      <form action="/file-upload" class="dropzone col-sm-8" id="product-image-drpzone"> 
       <div class="fallback"> 
        <input name="file" type="file" multiple /> 
       </div> 
       <div class="dz-message" data-dz-message><span>Drag & Drop Product images here to upload, or 
        <a class="btn-choose-file btn-link" id="btn-upload">browse.</a> 
       </span> 

       </div> 
      </form> 
      <div class="col-sm-4 dropzone-previews"> 
       <div class="col-sm-6 dz-preview drp-image"> 
       <img src="holder.js/100x100"> 
       </div> 
       <div class="col-sm-6 dz-preview drp-image"> 
       <img src="holder.js/100x100"> 
       </div> 
       <div class="col-sm-12 append_bottom10"></div> 
       <div class="col-sm-6 dz-preview drp-image"> 
       <img src="holder.js/100x100"> 
       </div> 
       <div class="col-sm-6 dz-preview drp-image"> 
       <img src="holder.js/100x100"> 
       </div> 
      </div> 
     </div> 

Wie kann ich meine Bilder in dem gegebenen laden Platzhalter mit Dropzone?

Ich versuchte mit dz-Vorschau auf die Bilder zeigen.

Answer 1

Gemäß der Dropzone-Dokumentation, wenn Sie einen anderen Container auswählen, sollte dieser die Klasse dropzone-previews haben, aber ich denke, dass es einen Fehler geben muss, da die Dropzone css nicht auf diese bestimmte Klasse abzielt.

Die einzige Arbeit, die ich mir vorstellen kann, ist, die DropZone CSS-Datei zu ändern. Suchen Sie einfach alle Vorkommen von .dropzone .dz-preview in der Dropzone CSS-Datei und ersetzen Sie sie durch .dropzone-previews .dz-preview.

Dann können Sie die Platzhalter mit der Dropzone-Vorschau wie folgt ändern.

html:

<div class="col-sm-12"> 
    <form action="upload.php" class="dropzone col-sm-8" id="product-image-drpzone"> 
    <div class="fallback"> 
     <input name="file" type="file" multiple /> 
    </div> 
    <div class="dz-message" data-dz-message> 
     <span>Drag & Drop Product images here to upload, or 
      <a class="btn-choose-file btn-link" id="btn-upload">browse.</a> 
      </span> 
    </div> 
    </form> 
    <div id="previews" class="col-sm-4 dropzone-previews"> 
    <div class="col-sm-6 dz-preview drp-image"> 
     <img src="holder.js/100x100"> 
    </div> 
    <div class="col-sm-6 dz-preview drp-image"> 
     <img src="holder.js/100x100"> 
    </div> 
    <div class="col-sm-6 dz-preview drp-image"> 
     <img src="holder.js/100x100"> 
    </div> 
    <div class="col-sm-6 dz-preview drp-image"> 
     <img src="holder.js/100x100"> 
    </div> 
    </div> 
</div> 

js:

Dropzone.autoDiscover = false; 

var myDropzone = new Dropzone(document.getElementById('product-image-drpzone'), { 
    uploadMultiple: false, 
    acceptedFiles: '.jpg,.png,.jpeg,.gif', 
    parallelUploads: 4, 
    maxFiles: 4, 
    url: Urls.products.image_upload, 
    previewsContainer: '#previews', 
    thumbnailWidth: 100, 
    thumbnailHeight: 100, 

    init: function() { 

    // This adds the bootstrap class col-sm-6 to the dropzone preview 
    var classIndex = this.options.previewTemplate.indexOf('dz-preview'); 
    this.options.previewTemplate = this.options.previewTemplate.slice(0, classIndex) + 'col-sm-6 ' + this.options.previewTemplate.slice(classIndex); 

    this.on('addedfile', function(file) { 
     $('.drp-image').first().remove(); 
    }); 
    } 
}); 

css:

.dropzone-previews .dz-preview { 
    margin: 0px; 
    margin-bottom: 10px; 
} 

.dropzone-previews .dz-preview .dz-image { 
    width: 100px; 
    height: 100px; 
    margin-bottom: 15px; 
    display: block; 
    margin: auto; 
} 

.drp-image > img{ 
    display: block; 
    margin: auto; 
} 

Yo können eine Demo here sehen.

Beachten Sie, dass ich gerade den Teil des Codes hinzugefügt, der die Vorschau betrifft