Я пытаюсь реализовать индикатор выполнения загрузки HTML5, используя поддержку XMLHttpRequest уровня 2 для событий прогресса.
В каждом примере, который вы видите, метод заключается в том, чтобы добавить прослушиватель событий к событию прогресса следующим образом:
req.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = Math.round(event.loaded * 100 / event.total);
console.log(percentComplete);
}
}, false);
Такие примеры всегда, кажется, предполагают, что event.lengthComputable будет правдой. В конце концов, браузер знает длину отправляемого запроса, конечно?
Независимо от того, что я делаю, event.lengthComputable является ложным. Я тестировал это в Safari 5.1.7 и Firefox 12, как на OSX.
Мой сайт построен с использованием Django, и я получаю ту же проблему на своих dev и производственных настройках.
Полный код, который я использую для создания загрузки формы, показан ниже (с использованием jQuery):
form.submit(function() {
// Compile the data.
var data = form.serializeArray();
data.splice(0, 0, {
name: "file",
value: form.find("#id_file").get(0).files[0]
});
// Create the form data.
var fd = new FormData();
$.each(data, function(_, item) {
fd.append(item.name, item.value);
});
// Submit the data.
var req = new XMLHttpRequest();
req.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = Math.round(event.loaded * 100 / event.total);
console.log(percentComplete);
}
}, false);
req.addEventListener("load", function(event) {
if (req.status == 200) {
var data = $.parseJSON(event.target.responseText);
if (data.success) {
console.log("It worked!")
} else {
console.log("It failed!")
}
} else {
console.log("It went really wrong!")
}
}, false);
req.addEventListener("error", function() {
console.log("It went really really wrong!")
}, false);
req.open("POST", "/my-bar/media/add/");
req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
req.send(fd);
// Don't really submit!
return false;
});
Я часами трахал свои волосы. Любая помощь ценится!