3

所以，我正在使用 HTML5 为大文件实现文件上传器。我正在使用新的切片/块将文件切成更小的块，目的是暂停/恢复以供以后实施。但是，每次我尝试上传（它有效）但它需要大量的内存和 CPU 使用（它可能会上升到 100% 的 cpu 使用）。我尝试不同大小的块文件，但没有帮助。

有谁知道出了什么问题？以及如何解决？该应用程序据称能够支持高达 4GB/文件，当然还有多个文件因此可能会达到 20GB 等。

注意：请不要在解决方案中包含 java 或 flash。因为我已经有了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 taskmanager 在 chrome 中测试有无 webworkers 的区别。

于 2012-07-18T07:45:59.333 回答