如何在Dropzone中展示带进度百分比的上传加载器？

步骤1：预置加载器DOM结构 #

首先在Dropzone容器内提前写入加载器元素，默认设为隐藏状态，示例代码如下：

<!-- Dropzone 主容器 -->
<div id="uploadDropzone" class="dropzone">
  <!-- 全局上传加载器，默认隐藏 -->
  <div class="dz-global-loader" style="display:none;text-align:center;padding:20px 0;">
    <!-- 替换为你本地的加载器图片路径即可 -->
    <img src="your-loader-path.gif" alt="上传中" style="width:48px;height:48px;">
    <p>文件上传中，请稍候...</p>
  </div>
</div>

步骤2：绑定Dropzone生命周期事件控制加载器显隐 #

Dropzone原生提供了完整的上传生命周期钩子，通过addedfile事件触发加载器显示，complete事件（上传成功/失败都会触发）判断队列状态后隐藏加载器即可，初始化示例：

// 关闭自动发现，避免重复初始化
Dropzone.autoDiscover = false;

const uploader = new Dropzone("#uploadDropzone", {
  url: "你的文件上传接口地址",
  // 其他自定义配置，按需补充
  maxFilesize: 10,
  acceptedFiles: ".jpg,.png,.pdf,.docx"
});

// 文件加入上传队列、开始上传前触发，显示加载器
uploader.on("addedfile", function(file) {
  document.querySelector(".dz-global-loader").style.display = "block";
});

// 单个文件上传完成（成功、失败都会触发）
uploader.on("complete", function(file) {
  // 确认当前无正在上传、待上传的文件时，再隐藏加载器，适配多文件上传场景
  if (uploader.getUploadingFiles().length === 0 && uploader.getQueuedFiles().length === 0) {
    document.querySelector(".dz-global-loader").style.display = "none";
  }
});

可选方案：单文件独立加载器 #

如果不需要全局加载器，要给每个文件的预览块单独添加加载器，可以用下面的实现逻辑：

uploader.on("addedfile", function(file) {
  // 给当前文件的预览DOM插入加载器
  const fileLoader = document.createElement("div");
  fileLoader.className = "dz-single-loader";
  fileLoader.innerHTML = '<img src="your-loader-path.gif" alt="上传中" style="width:24px;height:24px;">';
  file.previewElement.appendChild(fileLoader);
});

uploader.on("complete", function(file) {
  // 移除当前文件对应的加载器
  const targetLoader = file.previewElement.querySelector(".dz-single-loader");
  targetLoader && targetLoader.remove();
});

内容的提问来源于stack exchange，提问作者Yashpal Modi S