Question

我想知道是否以及如何更改预览图像位置。我设计了一个带有HTML和CSS的预览框，想知道是否可以（重新）将预览图像背景图像网址放在我的CSS中？

CSS

.preview-overlay-1 {
  position: absolute;
  width: 100%;
  height: 210px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/file-upload/fileupload-examples/1.jpeg");
  background-size: cover;
  z-index: 3;
  text-align: center;
}

HTML

<div class="document-upload-box-upload">
  <form action="/file-upload" class="dropzone dropzone-fileupload" id="fileuploadDropzoneImg">
    <i class="fa fa-file-image-o" aria-hidden="true" id="fileupload-image-icon"></i>
    <p class="add-document">
      ADD IMAGE OR VIDEO
    </p>
  </form>
</div>

HTML（预览叠加）

<div class="fileupload-preview-1">
  <div class="preview-overlay-1">
    <p class="preview-overlay-text-1">
      Click to add Caption
    </p>
  </div>
  <div class="preview-image-1"></div>
  <textarea class="overlay-display-hide preview-caption-1"
    placeholder="Add Your Caption here..."></textarea>
</div>

JS

Dropzone.options.fileuploadDropzoneImg = {
  maxFilesize: 100,
  acceptedFiles: "image/jpg,image/jpeg,image/png,image/gif,video/mp4",
  parallelUploads: 4,
  maxFiles: 4,
  addRemoveLinks: false,
}

Answer 1

Dropzone有一个名为previewsContainer的参数，它代表文件预览的容器，你可以简单地写previewsContainer: "#previews"，其中previews是你容器的id。

f.e。（用jquery）

$("div#file").dropzone({
        url: "/upload",
        autoProcessQueue: false,
        uploadMultiple: true,
        autoDiscover: false,
        createImageThumbnails: true,
        global: false,
        acceptedFiles: "image/*",
        previewsContainer: "#previews",
        previewTemplate: document.getElementById('customTemplate').innerHTML
    });

我可以更改预览图像位置（Dropzone.js）

1 个答案: