通過change事件，監聽圖片上傳，通過readerAsDataURL獲取上傳的圖片。

document.getElementById( 'img').addEventListener( 'change', function () {
     var reader = new FileReader();
     reader.onload = function (e) {
          //呼叫圖片壓縮方法：compress();
 

     };
     reader.readAsDataURL(this.files[0]);
     console.log(this.files[0]);
     var fileSize = Math.round( this.files[0].size/1024/1024) ; //以M為單位
     //this.files[0] 該資訊包含：圖片的大小，以byte計算 獲取size的方法如下：this.files[0].size;
}, false);

  對上傳的圖片進行壓縮，需要藉助於canvas API，呼叫其中的canvas.toDataURL(type, encoderOptions

//最終實現思路：
1、設定壓縮後的最大寬度 or 高度；
2、設定壓縮比例，根據圖片的不同size大小，設定不同的壓縮比。

functioncompress(res,fileSize) { //res代表上傳的圖片，fileSize大小圖片的大小
    var img = new Image(),
        maxW = 640
 
; //設定最大寬度

    img.onload = function () {
        var cvs = document.createElement( 'canvas'),
            ctx = cvs.getContext( '2d');

        if(img.width > maxW) {
            img.height *= maxW / img.width;
            img.width = maxW;
        }

        cvs.width = img.width;
        cvs.height = img.height;

        ctx.clearRect(0, 0, cvs.width, cvs.height);
        ctx.drawImage(img, 0, 0, img.width, img.height);

        var compressRate = getCompressRate(1,fileSize);

        var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);

        document.body.appendChild(cvs);
        console.log(dataUrl);
    }

    img.src = res;
}

functiongetCompressRate(allowMaxSize,fileSize){ //計算壓縮比率，size單位為MB
      var compressRate = 1;

      if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
      } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
      } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
      } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
      } else{
           compressRate = 0.9;
      }

      return compressRate;
}