プレースホルダdropzoneで画像をアップロードしますか？

Question

私は以下のように私の画像をアップロードするドロップゾーンを使用しています：

 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のプレースホルダ？

私は画像を指すためにdzプレビューを使ってみました。

Answer 1

別のコンテナを選択すると、これはクラスdropzone-previewsになるはずですが、dropzone cssがこの特定のクラスを対象としていないため、何らかのエラーが発生するはずです。

私が考えることができる唯一の仕事は、dropzone CSSファイルを変更することです。 dropzone cssファイルの.dropzone .dz-previewのすべての出現箇所を検索し、.dropzone-previews .dz-previewに置き換えてください。

次に、このようなドロップゾーンプレビューでプレースホルダを変更できます。

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を見ることができます。

プレビューに影響するコード部分を追加しました。