이미지를 자리 표시 자 dropzone에 업로드 하시겠습니까?

Question

내가 아래로 내 이미지를 업로드 할 수 DROPZONE을 사용하고 있습니다 :

 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); 
    }); 

내 페이지

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> 

Dropzone과 placeholder?

dz 미리보기를 사용하여 이미지를 가리려고했습니다.

Answer 1

다른 컨테이너를 선택할 때 dropzone 문서에 따르면이 클래스는 dropzone-previews이어야합니다. 그러나 dropzone css가이 특정 클래스를 대상으로하지 않기 때문에 약간의 오류가 있어야한다고 생각합니다.

제가 생각할 수있는 유일한 해결책은 dropzone CSS 파일을 수정하는 것입니다. dropzone css 파일에서 .dropzone .dz-preview의 모든 항목을 검색하고 .dropzone-previews .dz-preview으로 바꿉니다.

그런 다음 dropzone 미리보기를 사용하여 자리 표시자를 변경할 수 있습니다.

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; 
} 

요 데모 here을 볼 수 있습니다.

미리보기에 영향을주는 코드 부분을 추가했습니다.