Thanh tiến trình tải lên Dropzone.js không hiển thị

Question

Tôi đang sử dụng Dropzone.js để tải tệp lên và nó hoạt động hoàn hảo ngoại trừ thanh tiến trình không xuất hiện. Không có lỗi. Tôi đang sử dụng Bootstrap cho giao diện người dùng của trang web.

Sau khi tải lên một tập tin, nếu tôi kiểm tra các yếu tố trong Chrome, tôi thấy rằng cả nó và mẹ của nó có một chiều cao của 0px:

Điều kỳ lạ là, nếu tôi tự đặt chiều cao đến 10px, nó vẫn còn 0px. Ngay cả khi tôi đặt chiều rộng và chiều cao nội tuyến, nó vẫn còn chiều rộng và chiều cao 0px trong trình kiểm tra phần tử. (dz-progress, div mẹ, sẽ thay đổi nếu tôi đặt nó.)

Đoán tốt nhất của tôi là một cái gì đó trong Bootstrap hoặc jquery là mâu thuẫn với nó, nhưng tôi không đủ tốt với CSS để loại bỏ nó (nếu nó thậm chí là một vấn đề CSS). Đây là mã liên quan của tôi. Tôi khởi tạo Dropzone với Jquery, trên thẻ body, để bạn có thể thả một tệp bất cứ nơi nào trong cửa sổ trình duyệt.

<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> 

Mọi ý tưởng sẽ được đánh giá cao.

Answer 1

Đã giải quyết. CSS này được thêm vào dropzone.css đã sửa nó:

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

Thêm display: block cho chiều rộng khoảng nhưng nó vẫn không xuất hiện. Thêm chiều cao và màu nền cuối cùng đã làm cho nó xuất hiện. Thêm width: 0% đảm bảo rằng nó bắt đầu vô hình (nếu không nó sẽ bắt đầu như một thanh đầy đủ, sau đó nhảy trở lại khi bắt đầu tiến trình).