httpUploadProgress 진행 표시 줄

Question

ajax에서 일어나는 업로드 진행률 표시 줄을 사용자가 볼 수 있도록 만들려고합니다. 업로드가 s3 버켓으로 전송됩니다. 지금 현재로

var upload = s3.upload(
    {Bucket: 'tgr-video-ingest', Key: rCreds.ObjectKey, Body: file} 
); 

upload.on('httpUploadProgress', function (progress) { 
    var pct = Math.round(progress.loaded/progress.total * 100); 
    $('#progress').html(pct + '%'); 
});    

, 내가 AP 태그의 진행 상황을 기록하지만,로드 진행률 같은 애니메이션 HTML 요소 내에서 표시 할 해요 : 다음은 버킷에 파일을 전송하는 내 스크립트입니다 바. httpUploadProgress의 업로드 위치를 기반으로 요소를 애니메이션화하는 방법이 있습니까?

Answer 1

언젠가 다른 사람을 돕기 위해 내 자신의 질문에 대답하면서 알아 냈습니다. 진행 HTML 요소를 사용

var pct = Math.round(progress.loaded/progress.total * 100); 
    $('#percentage').html(pct + '%'); 
    var progressBar = document.getElementsByTagName("progress")[0], 
    animation = function(){ 
     progressBar.value = (pct); 
    }; 
    setTimeout(function(){animation();}); 
    if (pct == 100) { 
     $('#percentage').html('DONE'); 
    } 

, I는에게 httpUploadProgress 년에 완료 양 변수 'PCT'에 equeal 값을 할당하고있다. 나는 한 번 setTimeout을 호출하는 애니메이션 함수를 사용하여 그렇게하고있다.

그래서, httpUploadProgress가 완료되고 100에 도달하면 'DONE'이라는 단어로 완료된 백분율이 대체됩니다.