3

というわけで、HTML5で大容量ファイル用のFile Uploaderを実装しています。後で実装するために一時停止/再開する目的で、新しいスライス/チャンクを使用してファイルを小さなチャンクにスライスしています。ただし、アップロードを試みるたびに (動作します)、大量のメモリと CPU 使用量が必要です (CPU 使用率が 100% に達する可能性があります)。別のサイズのチャンク ファイルを試してみましたが、効果がありません。

誰が何が悪いのか知っていますか？そしてそれを修正する方法は？アプリは最大 4GB/ファイル、そしてもちろん複数のファイルをサポートできると思われるため、おそらく 20GB などになる可能性があります。

注: ソリューションに Java やフラッシュを含めないでください。私はすでにJavaバージョンを持っているからです。これをHTML5で書き直そうとしています。以下はコードです

        function sendRequest() {       
            var file = document.getElementById('fileToUpload');   

            for(var i = 0; i < file.files.length; i++) {      
                var blob = file.files[i];         
                var originalFileName = blob.name;
                var filePart = 0

                const BYTES_PER_CHUNK = 5 * 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) {
                        //for Google Chrome
                        var chunk = blob.webkitSlice(start, end); 
                    } else if (blob.mozSlice) {
                        //for Mozilla Firefox
                        var chunk = blob.mozSlice(start, end);
                        //pausecomp(5000);
                    }       

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


        function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
            if(filePart == 0) {
                bars = document.querySelector('#bars' + divBarsSelector);  
            }

            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 + filePart, true);

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

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

                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

1

この問題を回避するには、webworkersを使用してファイルをアップロードする必要があります。webworkersを使用すると、CPU使用率を減らすことができます。

Chromeタスクマネージャーを使用して、ChromeでWebワーカーを使用する場合と使用しない場合の違いをテストできます。

于 2012-07-18T07:45:59.333 に答える