JS中的进度条答案

【问题标题】：Progressbar in JSJS中的进度条
【发布时间】：2017-12-01 18:48:46
【问题描述】：

我有一个分割html为

<div id="download-progress"></div>

我想使用 js 函数 progress() 在其中显示我的文件上传进度，该函数在 Click 上运行。我使用以下表格进行文件上传。

<form id="myform" name="myform" enctype="multipart/form-data" target="hiddenFrame" method="post">

这些文件可能以 zip 格式出现，我将其解压缩，然后读取元数据，然后将它们附加到列表中。它通过标签名称获取节点以附加到数据中。我只是想要一个进度条，告诉我上传了多少文件。如果您要求，我可以为您提供更多信息。目前我尝试使用以下代码，但它没有提供我在 IE11 中上传文件的上传百分比。

function progress() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }

}

如何在所有现代浏览器中显示文件上传？

【问题讨论】：

但它在 IE11 中是否有效？我的意思是也许你的 CSS 有问题，导致它显示宽度不正确。如果您能给我们提供带有样式的完整代码示例，那将是完美的，以便我们对其进行测试和故障排除。
是的，它在 ie11 中确实有效，但没有显示进度百分比。

标签： javascript html cross-browser

【解决方案1】：

首先，我不知道您的代码应该做什么，但我可以猜到您正在上传一些文件并想为其创建一个进度条。您只是用计时器更改值就做错了，因为文件可能仍在上传，并且用户可能已经离开页面而没有让它完成。为了避免这种情况，我们通常使用 AJAX 上传和监听器来监听进度事件：

xhr: function() {
   var xhr = new window.XMLHttpRequest();
   xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress here
      }
}, false);

为避免 IE11 出现问题，您需要修复 IE 的 innerHTML 问题，source。

var container = document.getElementById("mainForm:table_1").parentNode;
var content = container.innerHTML
container.innerHTML= content;

对于您的示例，它应该是：

var elem = document.getElementById("myBar").parentNode;

【讨论】：

【解决方案2】：

innerHTML 属性在 IE 中尝试添加或更新表单元素

Link

【讨论】：

你对 ie 的 innerhtml 问题是正确的，我确实改变了它，但后来它也没有工作，所以正如 Telion 所说的那样，它似乎接近我需要的，但不符合我真正需要的.