web-dev-qa-db-ja.com

XMLHttpRequestで大きなファイルをアップロードする際の進行状況バー

XMLHttpRequestとfile.sliceを使用して、いくつかの大きなファイルをサーバーにアップロードしようとしています。
私は、ドキュメントやその他のさまざまなリンクを利用してこれを管理しています。
大きなファイルのアップロードは非常に時間がかかる作業であるため、ユーザーに進行状況バーを提供したいと考えています。
さらにいくつかの読み取りを行った後、 例 に遭遇しました。これは理論的には、私が必要としていることを正確に実行します。
サンプルコードを取得し、それを私のニーズに合わせて調整する

var upload =
{
blobs: [],
pageName: '',
bytesPerChunk: 20 * 1024 * 1024,
currentChunk: 0,
loaded: 0,
total: 0,
file: null,
fileName: "",

uploadChunk: function (blob, fileName, fileType) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.responseText) {
                // alert(xhr.responseText);
            }
        }
    };

    xhr.addEventListener("load", function (evt) {
        $("#dvProgressPrcent").html("100%");
        $get('dvProgress').style.width = '100%';
    }, false);

    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100);
            $("#dvProgressPrcent").html(progress + "%");
            $get('dvProgress').style.width = progress + '%';
        }
    }, false);

    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100);
            $("#dvProgressPrcent").html(progress + "%");
            $get('dvProgress').style.width = progress + '%';
        }
    }, false);

    xhr.open('POST', upload.pageName, false);

    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", fileName);
    xhr.setRequestHeader("X-File-Type", fileType);
    xhr.send(blob);
},
upload: function (file) {
    var start = 0;
    var end = 0;
    var size = file.size;

    var date = new Date();
    upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name;

    upload.loaded = 0;
    upload.total = file.size;

    while (start < size) {
        end = start + upload.bytesPerChunk;
        if (end > size) {
            end = size;
        }

        var blob = file.slice(start, end);
        upload.uploadChunk(blob, upload.fileName, file.type);
        start = end;
        upload.loaded += start;
    }

    return upload.fileName;
}
};

呼び出しは次のようになります（検証なし）

upload.upload(document.getElementById("#upload").files[0]);

私の問題は、progressイベントがトリガーされないことです。
進行状況イベントに対してxhr.addEventListenerとxhr.upload.addEventListenerを（一度に両方同時に）試行しましたが、トリガーされませんでした。 onreadystatechangeイベントとloadイベントは問題なくトリガーされます。

私が間違っていることの助けをいただければ幸いです

更新
何度も試してみましたが、進行状況をシミュレートできましたが、別の問題が発生しました。アップロード中にChromeのUIが更新されません。
コードは次のようになります

var upload =
{
    pageName: '',
    bytesPerChunk: 20 * 1024 * 1024,
    loaded: 0,
    total: 0,
    file: null,
    fileName: "",

    uploadFile: function () {
        var size = upload.file.size;

        if (upload.loaded > size) return;

        var end = upload.loaded + upload.bytesPerChunk;
        if (end > size) { end = size; }

        var blob = upload.file.slice(upload.loaded, end);

        var xhr = new XMLHttpRequest();

        xhr.open('POST', upload.pageName, false);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", upload.fileName);
        xhr.setRequestHeader("X-File-Type", upload.file.type);

        xhr.send(blob);

        upload.loaded += upload.bytesPerChunk;

        setTimeout(upload.updateProgress, 100);
        setTimeout(upload.uploadFile, 100);
    },
    upload: function (file) {
        upload.file = file;

        var date = new Date();
        upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name;

        upload.loaded = 0;
        upload.total = file.size;

        setTimeout(upload.uploadFile, 100);


        return upload.fileName;
    },
    updateProgress: function () {
        var progress = Math.ceil(((upload.loaded) / upload.total) * 100);
        if (progress > 100) progress = 100;

        $("#dvProgressPrcent").html(progress + "%");
        $get('dvProgress').style.width = progress + '%';
    }
};


アップデート2
私はそれを修正し、chromeでも機能する進行状況バーをシミュレートしました。
以前のコードサンプルを機能するコードで更新しました。
一度にアップロードされるチャンクのサイズを小さくすることで、バーをより頻繁に「リフレッシュ」することができます。

javascriptjqueryfile-uploadxmlhttprequest
15
Cioby

https://stackoverflow.com/a/3694435/460368 に記載されているように、次のことができます：

if(xhr.upload)
     xhr.upload.onprogress=upload.updateProgress;

そして

updateProgress: function updateProgress(evt) 
{
   if (evt.lengthComputable) {
       var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100);
       $("#dvProgressPrcent").html(progress + "%");
       $get('dvProgress').style.width = progress + '%';
   }
}
5
Shikiryu

私の解決策があります：

function addImages(id)
{


var files= $("#files").prop("files");
var file = files[loopGallery];
var cList= files.length;

var fd = new FormData();

fd.append("file", file);
fd.append("galerie", id);


var xhr = new XMLHttpRequest();

xhr.open("POST", "moduls/galerie/uploadimages.php", true);

xhr.upload.onprogress = function(e)
{

var percentComplete = Math.ceil((e.loaded / e.total) * 100);

$("#progress").css("display","");

$("#progressText").text((loopGallery+1)+" z "+cList);
$("#progressBar").css("width",percentComplete+"%");

};


xhr.onload = function()
{

if(this.status == 200)
{
    $("#progressObsah").load("moduls/galerie/showimages.php?ids="+id);

    if((loopGallery+1) == cList)
    {
        loopGallery = 0;

    }
    else
    {
    $("#progressBar").css("width", "0%");   
loopGallery++;
addImages(id);
}

};

};

if(cList < 1)
{

}
else
{
xhr.send(fd);
}


}
2
koca79331