次のJavaScriptコードを使用して、ファイルアップロードの進行状況バーを生成するためにAjaxを使用しています
function ulpoad_file(){
var o = $id("progress");
para = document.createElement("p")
para.style.height = 2 + 'px';
var progress = o.appendChild(para);
var file = $id("file").files[0];
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
p = 100-pc;
$id("status").innerHTML = p.toString() + "% Uploaded";
}, false);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
}
};
xhr.open("post", "", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback(xhr.responseText);
}
}
var datas = new FormData();
datas.append('file', file);
xhr.send(datas);
}
function $id(id) {
return document.getElementById(id);
}
これは、chrome およびいくつかの Firefox バージョンでは問題ありません。
ただし、「xhr.upload.addEventListener」は、モバイル ブラウザー (電話とタブの Android ブラウザー) と Linux マシンの Firefox では機能しません。
これに問題はありますか?モバイルブラウザのプログレスバーにもAjaxを使用する正しい方法は何ですか?
ありがとう