<input type="file" id="textfile" accept="image/*"/>上傳

<div class="upP_img1"></div>預覽框

$('#textfile').on('change', function() {

        var reader = new FileReader();//新建獲取file的讀取檔案
        var imgsrc = null;
         var _file = this.files[0],  //獲取的的圖片
            fileType = _file.type;  //圖片型別
            console.log(fileType);  
        reader.readAsDataURL(this.files[0]);//輸出base64圖片
        reader.onload = function(e) {//字面理解是載入圖片，得到結果吧，不是很理解
            imgsrc = this.result;//輸出結果
            // 壓縮
            var image=new Image();//新建圖片
            image.src=imgsrc;
            image.onload=function(){
                var cvs=document.createElement('canvas');//畫布
                var cvx =cvs.getContext('2d');//
                // draw image params
                cvs.width=this.width;
                cvs.height=this.height;                
                cvx.drawImage(this, 0, 0,this.width,this.height);//畫圖
                var newImageData = cvs.toDataURL(fileType,0.2);//這是壓縮，具體的看.toDataURL api 輸出base64
              

                console.log(newImageData);

                $('.upP_img1').html('<img id="newimg" src="' + newImageData + '">');
                console.log(this.width+'--'+this.height);
                // 上傳圖片後的以寬高充滿判斷    
                var imgscale2 = this.width / this.height;
               var photoscale2 = $('.upP_img1').width() /$('.upP_img1').height();
                if (imgscale2 > photoscale2) {
                    $('#newimg').css({ "width": "100%", "height": "auto" });
                } else {
                    $('#newimg').css({ "width": "auto", "height": "100%" });
                }
            }
        }

    });

$.ajax({

url:url,

type:post,

data:JSON.stringify($('#newimg').attr('src'))，success:function(){},error:function(){}

});

值得一提的是，canvs畫出來的圖片比上傳的原圖片要大，39k的原圖畫出來有180k 這是最騷的，5m壓縮20%出來有500k。

 http://www.zhangxinxu.com/study/201707/js-compress-image-before-upload.html這是別人的專業答案