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在给定占位符上传图像？

我尝试使用dz-preview指向图像。

Answer 1

根据dropzone文档，当你选择一个不同的容器时，它应该有类realm.where(Book.class) .equalTo("tags.type", X) .findAll().where() .contains("tags.name", Y) .findAll();，但我认为必须有一些错误，因为dropzone css似乎没有针对这个特定的类。

我能想到的唯一工作就是修改dropzone css文件。只需在dropzone css文件中搜索dropzone-previews的所有匹配项，然后替换为.dropzone .dz-preview。

然后您可以使用dropzone预览更改占位符。

HTML：

.dropzone-previews .dz-preview

JS：

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

的CSS：

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

哟可以看到演示here。

请注意，我刚刚添加了影响预览的代码部分

在占位符dropzone上传图片？

1 个答案: