jquery - Dropzone.js 上传进度条不显示

Question

我正在使用 Dropzone.js 进行文件上传，除了没有出现进度条外，它工作正常。没有错误。我在网站的前端使用 Bootstrap。

上传文件后，如果我在 Chrome 中检查该元素，我会看到它及其父元素的高度均为 0px:

奇怪的是，如果我手动将高度设置为 10px，它仍然是 0px。即使我设置了宽度和高度内联，它在元素检查器中仍然是 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>

任何想法将不胜感激。

Answer 1

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

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

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