如何通过预览模板实现Dropzone.js图片预览每行显示4个

利用Bootstrap的栅格系统就能轻松实现每行4个预览项的布局，具体操作如下：

1. 修改HTML结构 #

• 给预览容器dropzone-previews添加Bootstrap的row类，作为栅格的行容器：

  <div class="dropzone-previews row"></div>
  

• 调整预览模板，给每个预览项外层包裹col-md-3 mb-3类（col-md-3确保中等屏幕及以上每行显示4个，mb-3添加底部间距优化排版），同时给dz-preview添加边框和内边距提升美观度：

  <div id="preview-template" class="preview-template d-none">
      <div class="col-md-3 mb-3">
          <div class="dz-preview dz-file-preview border rounded p-2">
              <div class="dz-details text-center">
                  <img data-dz-thumbnail class="img-fluid rounded mb-2"/>
                  <div class="dz-filename text-truncate"><span data-dz-name></span></div>
                  <div class="dz-size small text-muted" data-dz-size></div>
              </div>
              <div class="dz-progress mt-2"><span class="dz-upload" data-dz-uploadprogress></span></div>
              <div class="dz-error-message text-danger mt-2"><span data-dz-errormessage></span></div>
          </div>
      </div>
  </div>
  

  额外添加的text-center让内容居中对齐，img-fluid保证图片自适应容器，text-truncate避免文件名过长溢出，small text-muted优化文件大小的显示样式，mt-2增加模块间的间距。

2. 覆盖Dropzone默认样式（可选） #

如果默认样式影响布局，可添加自定义CSS调整：

.dz-preview {
    margin: 0; /* 移除默认外边距，用Bootstrap间距类控制 */
}
.dz-progress {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}
.dz-upload {
    background-color: #0d6efd;
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

3. JavaScript配置保持不变 #

你的现有Dropzone配置无需修改，直接沿用即可：

let dropzone = new Dropzone("#dropzone_container", {
        url: "#",
        method: 'put',
        addRemoveLinks: true,
        previewsContainer: ".dropzone-previews",
        previewTemplate: '#preview-template',
        autoQueue: false,
        createImageThumbnails: true,
        thumbnailWidth: 360,
        thumbnailHeight: 360,
        autoProcessQueue: false,
        autoProcess: false,
        acceptedFiles: ".gif,.jpeg,.jpg,.png",
        maxThumbnailFilesize: 1000,
});

调整后，中等屏幕及以上设备会自动每行显示4个预览项，小屏幕则会自适应换行，完全适配Bootstrap的响应式特性。

内容的提问来源于stack exchange，提问作者AmyB