進行状況イベントのXMLHttpRequestレベル2サポートを使用して、HTML5の方法でアップロード進行状況バーを実装しようとしています。
表示されるすべての例で、メソッドは次のように進行状況イベントにイベントリスナーを追加することです。
req.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = Math.round(event.loaded * 100 / event.total);
console.log(percentComplete);
}
}, false);
このような例では、event.lengthComputableがtrueになると常に想定しているようです。結局のところ、ブラウザは送信するリクエストの長さを知っていますよね?
私が何をしても、event.lengthComputableはfalseです。私はこれをSafari5.1.7とFirefox12の両方でOSXでテストしました。
私のサイトはDjangoを使用して構築されていますが、開発と本番のセットアップで同じ問題が発生します。
フォームのアップロードを生成するために使用している完全なコードを以下に示します(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;
});
私はこれで何時間も髪を引き裂いてきました。助けていただければ幸いです。