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

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

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 является ложным.

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

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

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

Ответ 1

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

manifest.json

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

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

Дополнительные сведения об использовании xhr в расширениях google chrome приведены здесь.

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

Ответ 2

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

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

Пробовали ли вы прослушивание прогресса непосредственно на xhr:

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

Ответ 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;
        },

Ответ 4

Я думаю, что у меня есть решение для вашей проблемы
Я не знаю, что стоит за этой функцией "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;
    }
}

Ответ 5

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

  Content-Length: 12345

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