httpUploadProgress 期间的进度条

【问题标题】：Progress bar during httpUploadProgresshttpUploadProgress 期间的进度条
【发布时间】：2017-06-12 10:06:51
【问题描述】：

我正在尝试为使用 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 的上传位置为元素设置动画？

【问题讨论】：

标签： php jquery ajax amazon-s3 progress

【解决方案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 时，我将用“完成”一词替换完成的百分比。

【讨论】：