javascript FileReader在读取超过500kb的文件时冻结浏览器

Question

我在用户上传图片后尝试使用FileReader，以便用户可以预览他/她的图片。如果图片大小约为100kb，它可以顺利运行，但是当它高于500kb时，浏览器会冻结几秒钟。一旦我上传了2MB的图片并且浏览器需要1分钟才能加载。所以我的问题是如何让它在后台快速运行？或者有没有办法在FileReader处理之前使用javascript或jQuery压缩图片？

function read_img(input) {
        if (input.files && input.files[0]) {
            for(i=0;i<$(input.files).length;i++) {
                (function(file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $(".preview").append("<img src='"+e.target.result+"'/>")
                    }
                    reader.readAsDataURL(input.files[i]);
                })(input.files[i]);
           }
        }
    }