javascript - 我可以更改预览图像位置吗 (Dropzone.js)

Question

我想知道是否以及如何更改预览图像的位置。我用 HTML 和 CSS 设计了一个预览框，想知道是否可以在我的 CSS 中(重新)放置预览图像 background-image url？

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