4

次の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を使用する正しい方法は何ですか?

ありがとう

4

0 に答える 0