Javascript 通过java脚本计算服务器上传的数据

我试图通过Ajax（XMLHttpRequest）在服务器上上传大数据（不是文件），我需要计算服务器上上传的数据。我正在使用以下代码：

var formData = new FormData();
var xhr = new XMLHttpRequest();

formData.append('supplierListing', JSON.stringify(excelPostData));

formData.append('jobName', document.getElementById('jobNameInput').value);

formData.append('additionalHeader', addHeader);

xhr.open('post', '/primeChoice/sheet', true);

xhr.onprogress = function (e) {
  clearInterval (counterInt);
  document.getElementById ('uploadCounter').innerHTML = Math.floor((e.loaded / e.total) * 100) + '%';
}

xhr.onloadstart = function (e) {
  document.getElementById ('uploadCounter').innerHTML = '0%';
}  

xhr.onreadystatechange = function (aEvt) {
  if (xhr.readyState === 4) {
    if(xhr.status === 200) {
      document.getElementById("progressBar").style.display = "none";
      document.getElementById("uploadSheetStatus").style.display = "block";
      setTimeout(function() {
        location.reload();
      },3000);
    }
  }
}

xhr.onerror = function(e) {
  showInfo('An error occurred while submitting the form.');
};  

xhr.onload = function() {
  showInfo(this.statusText);
};

xhr.send(formData);

当我执行这段代码时，我得到的响应仅为0%、85%、100%。而它应该像增加进度数字一样，比如0%，1%，2%，100%

这意味着，执行调用在很长一段时间内不会从“onloadstart”事件重定向到“onprogress”事件，并且在很长一段时间内显示“0%”进度。但当编译器到达“onprogress”状态/事件时，它只显示2个响应，分别为85%和100%

---

如何改进此过程，以便实时获取上传的数据大小？

我努力解决此问题。您无法仅通过Javascript解决此问题。你必须使用套接字编程。它将有助于在运行时显示结果。 让我解释一下我的答案， node.js

在我的控制器中

var io = req.app.get('socketio');
connection.query('INSERT INTO [MY TABLE NAME] SET ?', row, function (error, results, fields) {
            if (error)
                throw error;

            let percentage =  parseInt (Math.ceil ((i/sheetData.length)*100));
            io.sockets.emit('progressBar',{ progressPercentage: (percentage > 100) ? 100 : percentage, user: row.user});
        });

在杰德看来

var socket = io();

socket.on('connect', function () {
  socket.on('message',function(data) {
    console.log (data);
  });
  socket.on('progressBar',function(data) {
    document.getElementById ('uploadCounter').innerHTML = null;
    document.getElementById ('uploadCounter').innerHTML = data.progressPercentage + '%';
  });
});

我相信这种方法将帮助您在运行时显示上载进度

var socket = io();

socket.on('connect', function () {
  socket.on('message',function(data) {
    console.log (data);
  });
  socket.on('progressBar',function(data) {
    document.getElementById ('uploadCounter').innerHTML = null;
    document.getElementById ('uploadCounter').innerHTML = data.progressPercentage + '%';
  });
});