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

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

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

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