XMLHttpRequest в Google-хром не сообщает о событиях в ходе

Question

Привет всем У меня есть этот код:

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    var data = generateRandomData(currentPayloadId); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

Кроме того, мой сервер отвечает на запрос начального OPTIONS для upload.aspx с 200 и Access-Control-Allow -Origin: * , а затем второй запрос POST

Все кажется на месте, и он отлично работает на FireFox, но в G Chrome обработчик updateProgress не вызван, а только один раз, а затем lengthComputable является ложным.

мне нужен-Allow-Origin Access-Control: *, потому что это вызов междоменное, родительский сценарий представляет собой ресурс на другом сервере, то область upload.aspx

Любой человек может дать мне некоторые подсказки, подсказки, пожалуйста, помогите? это известная проблема с G Chrome?

Спасибо! Яйцеклетки

Answer 1

Во-первых, убедитесь, что "www.example.com" добавляется к manifest.json, например, так:

manifest.json

{ 
    .. 
    "permissions": [ 
    "http://www.example.com/", 
    "https://www.example.com/", 
    ], 
    .. 
} 

Тогда я думаю, что ваш пример должен работать.

For more information about using xhr in google chrome extensions the docs are here.

Также the CSP docs стоит взглянуть на то, что то, что я изложил выше, не имеет.

Answer 2

Это может быть просто проблема совместимости с свойством XMLHttpRequest.upload. Он возвращает объект XMLHttpRequestUpload, но если вы попытаетесь найти эту спецификацию объекта в MDN, ее не существует, и как мы узнаем, какие браузеры полностью ее поддерживают.

XMLHttpRequest.загрузить СОВМЕСТИМОСТИ

Вы пробовали слушать прогресса непосредственно на XHR:

req.addEventListener("progress", updateProgress, false); 

Answer 3

Я использую JQuery для прогресса так:

$.ajax({ 
     url : furl, 
     type : method, 
     data : data, 
     //... 
     }, 
     xhr : function() { 
      //upload Progress 
      var xhr = $.ajaxSettings.xhr(); 
      if (xhr.upload) { 
        xhr.upload.addEventListener('progress', function (event) { 
         var percent = 0; 
         var position = event.loaded || event.position; 
         var total = event.total; 
         if (event.lengthComputable) { 
          percent = Math.ceil(position/total * 100); 
         } 
         //update progressbar 
         $(".progress-bar").css("width", + percent + "%"); 
         $(" .status").text(position + "/" + total + " (" + percent + "%)"); 
        }, true); 
      } 
      return xhr; 
     }, 

Answer 4

Я думаю, что у меня есть решение для Вашего проблема
Я не знаю, что стоит за этой функцией «generateRandomData()»

var data = generateRandomData(currentPayloadId) 

Это работает, когда я меняю в этом:

var data = new FormData(); 
data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 

Small Объяснение: Вам нужно вручную добавлять, чтобы сформировать данные формы ввода файла, где fileToUpload является <input type="file" name="fileToUpload" id="fileToUpload" />
и в вашей updateProgress функции в IF часть вы можете добавить что-то вроде этого, чтобы отслеживать прогресс console.log(evt.total +" - "+ evt.loaded)

Это работает в Google Chrome браузер. Я тестировал в новой версии браузера 57
Я сделал для себя формат выполнения загрузки 4 года назад, а это значит, что этот код работает и в старой версии браузера.

Весь фрагмент кода будет смотреть, как этот

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    //var data = generateRandomData(currentPayloadId); 
    var data = new FormData(); 
    data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
     console.log(evt.total +" - "+ evt.loaded) 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

Answer 5

Я имел эту проблему, когда страница вашего загружаются не содержит

Content-Length: 12345 

в заголовке, где 12345 является длина ответа в байтах. Без параметра длины функция прогресса не имеет права работать.