[英]How to make HTML Progress Bar Correctly
I am trying to make a Progress Bar for the uploaded progress in my application. 我正在尝试为我的应用程序中上传的进度创建进度栏。 So far I have this
到目前为止,我有这个
<div class="col-sm-12">
<span style="border-left:5px solid #555555; padding-left:.5em">Upload File</span>
<div style="margin-top:1em; margin-left:.8em;">
<input type="file" name="file" class="inputfile" id="group-agent-file" accept=".csv"/>
<label for="file" id="span-file-upload" class="btn btn-danger">
<span class="fa fa-upload" style="margin-right:.5em"></span>
<span id="span-file-name">Choose a file</span>
</label>
<div>
<button type="button" id="btn-group-agent-upload" class="btn btn-primary" title="Upload">Upload</button>
</div>
<div class="progress">
<div class="progress-bar progress-bar-green" role="progressbar" id="progress-bar-upload">
<span></span>
</div>
</div>
and this is my javascript 这是我的javascript
var result = event.target.result;
var data = $.csv.toObjects(result);
var length = data.length;
var count = 0;
var percent;
$.each(data, function (key, val) {
$.ajax({
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function (evt) {
console.log('progress', evt.loaded / evt.total * 100);
};
},
type: "POST",
url: "IROA_StoredProcedures.asmx/Insert_Bulk_Agent",
data: JSON.stringify(val),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
count = count + 1;
percent = count / length * 100;
$("#progress-bar-upload").css("width", percent + "%");
$("#progress-bar-upload span").text(percent + "% Complete");
console.log("Finished " + count + " of " + length + " employees.");
},
error: function (XMLHttpRequest) {
alert("error in Insert_Bulk_AgentInfo()");
console.log(XMLHttpRequest);
}
});
});
it works fine but I think the html can't process enough that sometimes the width
percentage is delayed. 它工作正常,但我认为HTML无法处理足够的
width
,有时会延迟width
百分比。 How can I do this? 我怎样才能做到这一点? and what may be the drawbacks when I use
setInterval
. 当我使用
setInterval
时可能会有什么弊端
To get upload progress in jQuery you need to attach Event-Listener to the progress event. 要在jQuery中获得上传进度,您需要将Event-Listener附加到progress事件。
You can do something like this in jQuery 您可以在jQuery中执行类似的操作
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total);
//Update the progress bar
}
});
return xhr;
},
type: 'POST',
url: "/upload/path",
data: { YOUR UPLOAD DATA },
success: function (data) {
}
});
This would work the same for plain js 这对于普通js来说是一样的
var xhr = new XMLHttpRequest();
xhr.open('POST', "/upload/path", true);
xhr.upload.addEventListener('progress', function (event) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total);
//Update the progress bar
}
}
xhr.onload = function (response) {
// handle success/error here
}
xhr.setRequestHeader(SET_HEADERS);
xhr.send(UPLOAD_DATA);
success function will be call when your ajax call gets completed. 当您的ajax调用完成时,将调用成功函数。 You should use xhr function instead of success.
您应该使用xhr函数而不是成功。
xhr: function(){
var xhr = $.ajaxSettings.xhr() ;
xhr.upload.onprogress = function(evt){
console.log('progress', evt.loaded/evt.total*100);
var percentageCompleted = evt.loaded/evt.total*100;
updateUploadPercentage(parseInt(percentageCompleted));
if(percentageCompleted == 100){
$("#p_custom_message_body").html('<p>Storing training data</p><img src="media/images/loading.gif">');
}
} ;
return xhr ;
}
After that update progress bar in another function :- 之后,在另一个功能中更新进度栏:
function updateUploadPercentage(progress) {
var elem = document.getElementById("progressBar");
elem.style.width = progress + '%';
elem.innerHTML = progress * 1 + '%';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.