多图片上传＆amp;调整大小会冻结铬甚至崩溃

Question

我有一个Javascript，可以调整多个图像的大小并上传它们。到目前为止它一直有效，直到你选择超过5个文件。从大约5到25个选定的文件中，如果您选择更多的浏览器崩溃，Chrome浏览器（或其他）的速度会非常慢。

这似乎需要很多记忆。

您有什么建议可以避免冻结浏览器/计算机或崩溃吗？

非常感谢你的帮助！

//选择文件后 document.querySelector（'form input [type = file]'）。addEventListener（'change'，function（event）{ $（“＃load”）。html（“http://www.maxk.at/image_uploader/ajax-loader.gif\">Uploadläuft”）;     //读取文件     var files = event.target.files;

// Iterate through files
var j=1;
var k=files.length;
for (var i = 0; i < files.length; i++) {

    // Ensure it's an image
    if (files[i].type.match(/image.*/)) {

        // Load image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Add elemnt to page
                var imageElement = document.createElement('div');
                imageElement.classList.add('uploading');
                imageElement.innerHTML = '<span class="progress"><span></span></span>';
                var progressElement = imageElement.querySelector('span.progress span');
                progressElement.style.width = 0;
                document.querySelector('form div.photos').appendChild(imageElement);

                // Resize image
                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                // Upload image
                var xhr = new XMLHttpRequest();
                if (xhr.upload) {

                    // Update progress
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = parseInt(event.loaded / event.total * 100);
                        progressElement.style.width = percent+'%';
                    }, false);

                    // File uploaded / failed
                    xhr.onreadystatechange = function(event) {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                imageElement.classList.remove('uploading');
                                imageElement.classList.add('uploaded');
                                imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
                                console.log('Image uploaded: '+j+k+'Abstand'+xhr.responseText);
                                j++;
                                if (j==k){$("#load").html("Upload beendet");}
                                if (k==1){$("#load").html("Upload beendet");}
                            } else {
                                imageElement.parentNode.removeChild(imageElement);
                            }
                        }
                    }

                    // Start upload
                    xhr.open('post', 'process.php', true);
                    xhr.send(canvas.toDataURL('image/jpeg'));

                                        }

            }

            image.src = readerEvent.target.result;

        }
        reader.readAsDataURL(files[i]);
    }

}
    // Clear files
event.target.value = '';
});