从 Javascript 库调用的事件

Question

我目前正在编写 Javascript 上传库，我想在几个网站上使用它，我有自己的对象 Data，其中包含文件、元数据等

Data 具有名为 .send() 的函数，它使用 XMLHttpRequest

上传 FormData

我的目标是在 'progress' 上使用 EventListener 创建进度条。但是我不知道哪种做法是正确的，因为我不知道在每个页面的 HTML 中进度条的位置将如何命名。而且我还不想有任何 HTML 代码，只有能让我自定义的东西。

我应该如何处理这种情况？

我当前的代码：

Data.prototype.send = function() {
  'use strict';
  var formData = new FormData();
  formData.append('file', this.file, this.name);
  if (this.property !== undefined) {
    formData.append('property', this.property);
  }
  var request = new XMLHttpRequest();

  request.upload.addEventListener('progress', function(e) {
    var pc = parseInt(100 - (e.loaded / e.total * 100));
    //What to do here?
  }, false);

  request.onreadystatechange = function(e) {
    if (xhr.readyState == 4) {
      //What to do here?
    }
  };
  request.open('POST', upload.php, true);
  request.send(formData);
};

Answer 1

向您的 send() 方法添加回调是一种可能的解决方案。然后每个使用上传小部件的页面都可以接收进度事件，用于更新它们的 UI。您还可以将事件预处理为 return 一个简单的完成百分比。两种方法都显示在下面的示例中。

此外，"onloadstart"、"onprogress" 和 "onloadend" 都是 return 相同的事件类型，但在上传周期的不同时间点。因此，使用单个处理程序将所有三个组合起来可能很有用（如图所示）。

根据我的经验，并非所有浏览器 return 都具有相同的属性或同时处于上传周期。因此，您可能需要进行一些试验才能使其正常工作。比较有用的属性有：iscomputable、total、totalSize、loaded、position。有关 MDN 的更多信息 here。

Data.prototype.send = function( callback ) {

    // 1. forward raw event to page handler 

    request.upload.onloadstart = 
      request.upload.onprogress = 
        request.upload.onloadend = callback;

    // 2. alternative - process event and return percent to page handler

    request.upload.onloadstart = 
      request.upload.onprogress = 
        request.upload.onloadend = function(e) {

            var pc = parseInt(100 - (e.loaded / e.total * 100));
            if (typeof callback == 'function') callback( pc );

    }

从 Javascript 库调用的事件

Events called from Javascript library

javascript

file-upload

dom-events