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

截至目前，我正在 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 元素，我为其分配一个等于变量 'pct' 的值，这是 httpUploadProgress 中完成的数量。我这样做是通过使用动画函数运行一次调用 setTimeout.

此外，当 httpUploadProgress 已完成并达到 100 时，我将用 'DONE' 一词替换完成的百分比。

httpUploadProgress 期间的进度条

Progress bar during httpUploadProgress

php

ajax

jquery

progress

amazon-s3