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 + '%');
});

截至目前，我正在p标签中编写进度，但希望将其显示在像加载进度条一样动画的html元素中。有没有办法根据httpUploadProgress的上传位置动画元素？

Answer 1

我已经弄明白了，回答了我自己的问题，希望有一天能帮助别人。

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元素，我为它赋予一个值变量值，以便变量＆＃39; pct＆＃39;这是在httpUploadProgress中完成的金额。我这样做是通过使用一次调用setTimeout运行的动画函数来实现的。

更重要的是，我用'＆＃39; DONE＆＃39;这个词取代了已完成的百分比金额。当httpUploadProgress完成并达到100时。

httpUploadProgress期间的进度条

1 个答案: