XMLHttpRequest в google-chrome не сообщает о событиях прогресса
Автор вопроса: OviОтветов: 5
Привет всем, у меня есть этот код:
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.
Мне нужен Access-Control-Allow-Origin: * потому что это междоменный вызов, родительский скрипт является ресурсом на другом сервере, чем домен upload.aspx
Кто-нибудь может дать мне некоторые подсказки, подсказки, помогите, пожалуйста? это известная проблема с G Chrome?
Благодарю вас! Ова
Это работает, когда это не CORS? Если это так, создайте ошибку на crbug.com/new. Kinlan 03.04.2012
для людей, оглядывающихся вокруг, тело eval func updateProgress может быть полностью пропущено, если событие xhr progress установило evt.lengthComputable в false. Я не совсем уверен в том, что определяет такое поведение, но, похоже, это происходит при обмене небольшими порциями в запросах. Вы можете легко проверить завершение {в той же функции} (только), проверив свойства обработчиков событий position и loaded. (кстати, этот синтаксис не (скорее всего) совместим с новейшими версиями jquery.) Cristian Cavalli 21.03.2014
Поскольку вы используете абсолютный URL-адрес, не должен ли он начинаться с: http://? Scott Marcus 28.10.2016
У меня аналогичная проблема с событием прогресса: stackoverflow.com/questions/48679979/ sultan 10.03.2018
Думаю, у меня есть решение вашей проблемы Я не знаю, что стоит за этой функцией "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;
}
}
Ответ 2 · рейтинг 1 · Nathaniel
У меня была эта проблема, когда страница, которую вы загружаете, не содержит
Content-Length: 12345
в заголовке, где 12345 - длина ответа в байтах. Без параметра длины функции прогресса не над чем работать.
Ответ 3 · erikvold
Во-первых, убедитесь, что "www.example.com" добавлено к manifest.json, например:
Дополнительную информацию об использовании xhr в расширениях Google Chrome можно найти здесь.
Также стоит ознакомиться с документами CSP, если то, что я предоставил выше, не соответствует требованиям.
Ответ 4 · R. McIntosh
Это может быть просто проблема совместимости со свойством XMLHttpRequest.upload. Он возвращает объект XMLHttpRequestUpload, но если вы попытаетесь найти спецификацию этого объекта в MDN, его не существует, так как же мы узнаем, какие браузеры полностью его поддерживают.
Совместимость XMLHttpRequest.upload
Вы пробовали слушать прогресс непосредственно на xhr:
