1

ファイルをアップロードするコードがあり、html5 チャンクを使用してファイルをスライスします。現時点では、プログレス バーはファイルのすべてのチャンクに対応しています。プログレス バーを 1 つだけにするためにはどうすればよいですか。例: コードと画像の例: 各プログレス バーはファイルの 1 つのチャンク (1MB) に対応しますが、これらのプログレス バーを組み合わせて 1 つのバーしか持たずに正しいパーセンテージを維持する方法など

ここに画像の説明を入力

        var uploaders = [];
        var totalChunks = 0;
        var i = 0;
        $(document).ready(function() {
            var progress = document.querySelector('progress');
            var bars = document.querySelector('#bars'); 
        });        


        //function for after the button is clicked, slice the file 
        //and call upload function
        function sendRequest() {       
            //clean the screen
            //bars.innerHTML = '';
            var blob = document.getElementById('fileToUpload').files[0];
            var originalFileName = blob.name;
            const BYTES_PER_CHUNK = 1 * 1024 * 1024; // 10MB chunk sizes.
            const SIZE = blob.size;

            var start = 0;
            var end = BYTES_PER_CHUNK;
            totalChunks = Math.ceil(SIZE / BYTES_PER_CHUNK);

            while( start < SIZE ) {                    
                if (blob.webkitSlice) {
                  var chunk = blob.webkitSlice(start, end);
                } else if (blob.mozSlice) {
                  var chunk = blob.mozSlice(start, end);
                }       

                uploadFile(chunk, originalFileName, totalChunks);
                start = end;
                end = start + BYTES_PER_CHUNK;
            }
        }


        function uploadFile(blobFile, fileName, totalChunks) {
            var progress = document.createElement('progress');
            progress.min = 0;
            progress.max = 100;
            progress.value = 0;
            bars.appendChild(progress);   

            var fd = new FormData();
            fd.append("fileToUpload", blobFile);

            var xhr = new XMLHttpRequest();                
            xhr.open("POST", "upload.php"+"?"+"file="+fileName + i, true);
            i++;

            xhr.onload = function(e) {
                //make sure if finish progress bar at 100%
                progress.value = 100;

                //counter if everything is done using stack
                uploaders.pop();

                if (!uploaders.length) {
                    bars.appendChild(document.createElement('br'));
                    bars.appendChild(document.createTextNode('DONE :)'));
                    mergeFile(fileName, totalChunks);
                }                  
            };

            // Listen to the upload progress for each upload.   
            xhr.upload.onprogress = function(e) {;
                if (e.lengthComputable) {
                    progress.value = (e.loaded / e.total) * 100;
                }
            };                 

            uploaders.push(xhr);
            xhr.send(fd);
        }
4

1 に答える 1

0

これまでにアップロードされた合計バイト数を保持するグローバル変数を保持し、進行ハンドラー内で更新する必要があります。

var totalLoaded = 0

内部uploadFile():

var chunkLoaded = 0;
....
function(e) {
  var prevLoaded = chunkLoaded;

  if (e.lengthComputable) {
    // use e.loaded and e.total as a percentage of bytes per chunk
    // upload request contains more bytes than the actual chunk
    chunkLoaded = Math.ceil(e.loaded / e.total * BYTES_PER_CHUNK);
    totalLoaded = totalLoaded - prevLoaded + chunkLoaded;
    // update progress bar here
  }
}

ところで、同時に 20 個のチャンクをアップロードしていますか? これは通常、あまり健全ではなく、接続をドロップする傾向があります (totalLoadedチャンクを再試行する場合は、接続も更新する必要があります)。

同時アップローダーの数を 2/3 に制限することをお勧めします。

于 2012-06-15T13:23:07.993 に答える