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%确保它开始不可见(否则它将作为一个完整的条开始,然后在进度开始时跳回).