XMLHttpRequest в Google-Chrome не сообщает о событиях прогресса

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 имеет значение false.

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

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

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

Answer 1

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

var data = generateRandomData(currentPayloadId)

Это работает, когда я перехожу на это:

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

Небольшое объяснение: вам нужно добавить вручнуюсформировать данные в форме ввода файла, где 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 2

У меня была эта проблема, когда загружаемая страница не содержит

  Content-Length: 12345

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

Answer 3

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

Совместимость XMLHttpRequest.upload

Вы пробовали слушать прогресс прямо на xhr:

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

Answer 4

Я использую 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 5

Сначала убедитесь, что "www.example.com" добавлено к manifest.json, вот так:

manifest.json

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

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

Дополнительную информацию об использовании xhr в расширениях Google Chrome можно найти здесь .

Также документы CSP стоит посмотреть, если то, что я предоставил выше, не делает.