如何使用Dropzone JS实现文件上传百分比展示及进度条功能

问题原因及修复方案 #

你写的代码不生效主要是两个常见问题：

1. 事件回调中的this指向Dropzone实例对象，不是DOM容器元素，直接用$(this)查找子元素会找不到目标节点
2. 你拼接选择器用到的id变量大概率未正确定义，或者拼接后的选择器和实际DOM结构不匹配

正确实现代码

HTML结构（你原有结构无需改动，这里仅做参考）

<!-- Dropzone容器，假设你给它设置的id为myDropzone -->
<div id="myDropzone" class="dropzone">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <div class="dropzone-percentage">
    <span class="dropzone-progress-total"></span>
  </div>
</div>

JS逻辑

// 初始化Dropzone，替换成你自己的上传接口地址
const myDropzone = new Dropzone("#myDropzone", {
  url: "/your/upload/api"
  // 其他你需要的配置项，比如文件大小限制、接受的文件类型等
});

// 监听总上传进度事件
myDropzone.on("totaluploadprogress", function(progress) {
  // 直接用Dropzone容器的选择器查找元素，避免this指向问题
  $("#myDropzone .progress-bar").css("width", progress + "%");
  // 用toFixed(0)把小数进度转为整数，显示更友好
  $("#myDropzone .dropzone-progress-total").text(progress.toFixed(0) + "%");
});

排查技巧

如果修改后仍然不生效，可以在回调中加日志快速定位问题：

• 打印console.log(progress)确认进度值能正常返回
• 打印console.log($("#myDropzone .dropzone-progress-total").length)，如果返回值为0说明选择器和实际DOM结构不匹配，需要调整选择器写法

如果你需要给每个单独上传的文件显示各自的进度，替换为uploadprogress事件即可：

myDropzone.on("uploadprogress", function(file, progress) {
  // 直接从当前文件的预览节点中找进度展示元素
  file.previewElement.querySelector(".dropzone-progress-total").textContent = progress.toFixed(0) + "%";
});

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