twitter-bootstrap Dropzone.js 上传进度条未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23750367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropzone.js upload progress bar not showing
提问by felwithe
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。即使我设置了宽度和高度inline，它在元素检查器中仍然是 0px 宽度和高度。（不过dz-progress，如果我设置它，父 div 会改变。）
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.
任何想法将不胜感激。
回答by felwithe
Solved. This CSS added to dropzone.css fixed it:
解决了。添加到 dropzone.css 的这个 CSS 修复了它：
.dz-upload {
display: block;
background-color: red;
height: 10px;
width: 0%;
}
Adding display: blockgave 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).
添加display: block给出了跨度宽度，但它仍然没有出现。添加高度和背景颜色终于让它出现了。添加width: 0%确保它开始不可见（否则它会以完整的条形开始，然后在进度开始时跳回）。
