Индикатор выполнения во время httpUploadProgress
Я пытаюсь создать индикатор прогресса, видимый пользователю для загрузки, которая происходит с 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 + '%');
});
На данный момент я пишу прогресс в теге p, но хочу отобразить его в HTML-элементе, который анимируется как индикатор загрузки. Есть ли способ анимировать элемент, основанный на позиции загрузки httpUploadProgress?
Решение
Я понял это, отвечая на мой собственный вопрос в надежде, что это когда-нибудь поможет кому-то еще.
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');
}
Используя html-элемент progress, я присваиваю ему значение, равное переменной pct, которая является суммой, завершенной в httpUploadProgress. Я делаю это с помощью функции анимации, которая запускается только один раз, вызывая setTimeout.
Более того, я заменяю процентную сумму, заполненную словом «ВЫПОЛНЕНО», когда httpUploadProgress завершился и достиг 100.
Другие решения
Других решений пока нет …