Dropzone。js上传进度条未显示

I'm using Dropzone.js for file uploads, and it's working perfectly except that the progress bar is not appearing. There are no errors. I'm using Bootstrap for the front end of the site.

我用Dropzone。用于文件上传的js，它工作得很好，除了进度条没有出现。没有错误。我在网站前端使用Bootstrap。

After uploading a file, if I inspect the element in Chrome, I see that both it and its parent have a height of 0px:

上传文件后，如果我查看Chrome中的元素，我发现它和它的父元素的高度都是0px:

The strange thing is, if I manually set the height to 10px, it remains 0px. Even if I set the width and height inline, it remains 0px width and height in the element inspector. (dz-progress, the parent div, will change if I set it, though.)

奇怪的是，如果我手动设置高度为10px，它仍然是0px。即使我将宽度和高度内联，在元素检查器中仍然保持0像素的宽度和高度。(不过，如果我设置了父div, dz-progress将会改变。)

My best guess is that something in Bootstrap or jquery is conflicting with it, but I'm not good enough with CSS to ferret it out (if it's even a CSS issue). Here is my relevant code. I instantiate Dropzone with Jquery, on the body tag, so that you can drop a file anywhere in the browser window.

我最大的猜测是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>

Any ideas will be appreciated.

任何想法都会受到欢迎。

1 个解决方案

#1

Solved. This CSS added to dropzone.css fixed it:

解决了。这个CSS添加到dropzone。css固定:

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

Adding display: block gave the span width but it was still not appearing. Adding the height and background color finally made it appear. Adding width: 0% made sure it started invisible (otherwise it would start as a full bar, then jump back when progress began).

添加显示:block给出了跨度宽度，但仍然没有显示。增加了高度和背景颜色最终使它出现。添加宽度:0%确保它开始不可见(否则它将作为一个完整的bar开始，然后在进程开始时跳回)。