Dropzone.js 上传进度条不显示

Posted 2023-03-12

【中文标题】Dropzone.js 上传进度条不显示

【英文标题】：Dropzone.js upload progress bar not showing

【发布时间】：2014-05-20 03:02:57

【问题描述】：

我正在使用 Dropzone.js 进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用 Bootstrap。

上传文件后，如果我在 Chrome 中检查元素，我发现它及其父元素的高度均为 0px：

奇怪的是，如果我手动将高度设置为 10px，它仍然是 0px。即使我设置了宽度和高度 inline，它在元素检查器中仍然是 0px 宽度和高度。 （dz-progress，父 div，如果我设置它会改变。）

我最好的猜测是 Bootstrap 或 jquery 中的某些内容与它冲突，但我对 CSS 的了解还不够好（如果它甚至是 CSS 问题的话）。这是我的相关代码。我在 body 标签上用 Jquery 实例化 Dropzone，这样你就可以在浏览器窗口的任何位置放置文件。

<div id="upload">
Drag and drop anywhere on the page to upload, or click here to select files.
</div>
<div id="uploads"></div>

<script src="bootstrap\js\jquery-2.1.0.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<script src="bootstrap\js\dropzone.js"></script>
<script type="text/javascript">
    $("body").dropzone( url: "upload.php", maxFilesize: 10, previewsContainer: "#uploads", clickable: "#upload", paramName: "userfile", success: function(file, response) alert("success: "+response); , error: function(file, response) alert("error: " +response); , method: "post" );
</script>

任何想法都会受到赞赏。

【问题讨论】：

实时链接将提供更好的答案机会。

【参考方案1】：

解决了。添加到 dropzone.css 的这个 CSS 修复了它：

.dz-upload  
    display: block; 
    background-color: red; 
    height: 10px;
    width: 0%;

添加display: block 给出了跨度宽度，但它仍然没有出现。添加高度和背景颜色终于让它出现了。添加width: 0% 确保它开始时是不可见的（否则它会以一个完整的条形开始，然后在开始时跳回）。

【讨论】：

我没有设置显示块导致它不出现。