我可以毫无问题地创建进度条,并且在上传文件时进度条会显示“进度”。但是,我无法将div的顶部边框整理为进度条。请参阅下面的jsfiddle。我喜欢蓝色的顶部边框成为进度栏。我也尝试将“ progressbar”更改为“ hpanel hblue”,但这也不起作用。谢谢。
HTML:
<div class="row">
<div class="col-lg-5">
<div class="hpanel hblue">
<div class="panel-heading hbuilt">Upload file</div>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<div class="panel-body">
<form id="upload_form" enctype="multipart/form-data" method="post">
<div class="input-file-container">
<input type="file" name="file1" id="file1" class="input-file">
<label tabindex="0" for="my-file" class="input-file-trigger btn btn-primary"><i class="fa fa-upload"></i> <span class="bold">Upload</span></label>
<h5 id="status"></h5>
<p id="loaded_n_total"></p>
</div>
<p class="file-return"></p>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<button class="btn btn-primary" value="Upload File" onclick="uploadFile()"><span class="bold">Do it!</span></button>
</div>
</div>
</form>
</div>
</div>
</div>
JS:
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
CSS:
.hpanel.hblue .panel-body {
border-top: 2px solid #3498db;
}
progress {
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: progress-bar;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
}
.hpanel {
background-color: none;
border: 0;
box-shadow: none;
margin-bottom: 25px;
}
.input-file-container {
position: relative;
width: 225px;
}