JS 中的进度条

Question

我有一个部门 html 作为

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

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

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

}

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

Answer 1

The innerHTML property has some problems in IE when trying to add or update form elements

Link

Answer 2

首先，我不知道你的代码应该做什么，但我猜你正在上传一些文件并想为它创建一个进度条。你这样做是错误的，只是用计时器更改值，因为文件可能仍在上传并且用户可能已经离开页面而没有让它完成。为避免这种情况，我们通常使用 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;

JS 中的进度条

Progressbar in JS

html

javascript

cross-browser