[英]How to show progress bar in percentage?
如何以百分比顯示屏幕上的上傳進度? 我想顯示以0%開頭的欄,並從percentComplete
變量輸出百分比。 上傳完成后,我希望在進度欄中看到消息已完成。 如果有人可以提供一些示例,我將不勝感激。 謝謝。
<div>Select file for upload:
<input type="file" id="fileUpload" name="fileUpload" onChange="fileUpload()"/>
<span id="showBar"></span>
</div>
這是我的JQuery函數:
function fileUpload(){
var reader = new FileReader();
var file = fileExist.files[0];
reader.onload = function(e) {
var text = reader.result.split(/\r\n|\n/);
var myForm = new FormData(document.getElementById('myForm'));
$.ajax({
/*Start-Progress Bar Code*/
xhr: function(){
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if(evt.lengthComputable){
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
console.log(percentComplete);
if(percentComplete === 100){
console.log("Successfully uploaded!");
}
}
},false);
return xhr;
},
/*End*/
type: 'POST',
url: 'FileUpload.cfc?method=uploadFile',
data: new FormData($('#myForm')[0]),
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
dataType: 'json'
}).done(function(obj){
if(obj.STATUS === 200){
$('#myForm')[0].reset();
}else{
alert('Error!');
}
}).fail(function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
})
}
reader.readAsText(file, 'UTF-8');
}
您是否考慮過plupload? 這是他們的核心示例,帶有簡單的文本百分比: http : //www.plupload.com/examples/core
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.