События вызываются из Java-библиотеки

Question

Im в настоящее время пишет яваскрипта при загрузке библиотеки, которые я хочу использовать через несколько веб-сайтов, у меня есть мой собственный объект Data, которые содержат файлы, метаданные и т.д.

Data имеет функцию под названием .send(), который загружает FormData с XMLHttpRequest

Моя цель - создать индикатор выполнения с EventListener по телефону 'progress'. Но я не знаю, какой подход правильный, потому что я не знаю, как место для бара прогресса будет называться в 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

Добавление обратного вызова для вашего посыла() метод является одним из возможных решений. Затем каждая страница с использованием виджета загрузки может получать события прогресса, с помощью которых можно обновить свой интерфейс. Вы также можете предварительно обработать события, чтобы вернуть простой процент. Оба метода показаны в приведенном ниже примере.

Кроме того, «onloadstart», «onprogress» и «onloadend» возвращают одинаковый тип события, но в разных точках цикла загрузки. Поэтому было бы полезно (как показано) объединить все три, используя один обработчик.

По моему опыту, не все браузеры возвращают одни и те же свойства или одновременно в цикл загрузки. Поэтому вам может потребоваться немного поэкспериментировать, чтобы он работал правильно. Более полезные свойства: iscomputable, total, totalSize, загружен, позиция. Дополнительная информация here на MDN.

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); 

    }