Android 离子交换膜的上载研究进展

我有一个表单，用户可以在其中添加信息和图像。图像是base64编码的，因此所有内容都存储在json对象中。当用户提交此对象时，它将被发送到服务器（使用

$resource

）

例如，如果一个用户添加了3个图像，每个图像大约2MB，有一个像Edge这样糟糕的连接，并且想要上传它，这看起来好像要花很长时间。用户只看到

$ionicLoading

覆盖，而不知道需要多长时间，或者已经上载了多少%

用户体验是不好的，因为用户可以假设应用程序冻结或处于无休止的循环中，并且它只是一个不好的应用程序

我有以下想法，但不知道它们是否可行

有没有办法在angular、cordova或ionic中获取浏览器信息？已经上传了多少

有没有办法获得当前的上传速度？我可以通过获取我的

stringized

JSON对象的

长度来获取对象的大小，将其除以1024得到kB。然后，我会每秒检查一次当前上传速度，并将当前上传速度添加到一个变量中。根据这些信息，我可以大致计算上传的百分比

JQuery ajaxForm插件

---

听起来您正在寻找的是来自事件的进度

假设您的服务器设置为处理XHR2并返回内容长度（使用纯JavaScript）：

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));

如您所述，还可以使用progress事件中返回的信息计算上传速度

至于AngularJS/Ionic中的这个实现，似乎这是一个长期存在的框架，$http并不真正支持进度事件

---

我见过使用专门为此编写的实现，甚至使用实现的实现。

非常好！将它与$q.defer（）结合起来，并在xhr.onreadystatechange状态更改为4事件时解决了它，因此我几乎不需要更改代码中的任何内容。谢谢